Dart组件进度条仅在循环结束时更新

Question

我正在开发一个角度飞镖的应用程序，并尝试动画显示文件上传进度的进度条。我只是从文件中解析JSON，并使用_service.create(....)方法将它们发送到服务。

我把所有这些代码放在一个async方法中，当我单击提交按钮时调用该方法：

void uploadFile() async {

  submitButton.attributes.addAll({ 'disabled': '' });
  progress.value = 0;

  FileList files = input.files;

  if (files.isEmpty) {
    _handleError("No file selected");
    //handle error, probably a banner
    return;
  }

  File file = files.item(0);

  FileReader reader = new FileReader();
  //reader.result
  reader.onLoadEnd.listen((e) async {


    Map map = json.decode(reader.result);

    var combinations = map['combinations'];

    progress.max = combinations.length;

    int loopCount = 0;

    combinations.forEach((e) async {
      await _service.create(VJCombination.fromJSON(e)).then((_) {
        combinationCount++;
        progress.value++;

        loopCount++;

        if (loopCount == combinations.length) {
          submitButton.attributes.remove('disabled');
        }
      });

    });

    isLoadSuccessful = true;

  });

  reader.onError.listen((evt) => print(evt));

  reader.readAsText(file);

  progress.value = 10;

} 

我用progress注释获得submitButton和@ViewChild元素：

@ViewChild('progress')
ProgressElement progress;

@ViewChild('submit')
ButtonElement submitButton;

代码有效。进度条从空开始，在读取文件并且服务获取数据后，进度条已满。

我的问题是，只有在将所有组合发送到_service后才会更新UI。所以它似乎在一帧中从空到满。

Answer 1

这段代码

 combinations.forEach((e) async {

没有意义，因为forEach不关心返回的Future

而是使用

 for(var e in combinations) {

不确定这是否解决了您的问题，但这些代码肯定需要更改。