Question

我正在开发一个使用Angular Dart的应用程序，并尝试制作一个动画进度条，以显示文件上传的进度。我只是从文件中解析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) {

不确定是否可以解决您的问题，但是肯定需要更改此类代码。

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

1 个答案: