Question

我的应用中有一个使用while循环更新的进度条。我可以使用每个循环成功更改更新进度值，但视图仅在整个while循环完成后更新。有没有办法在while循环中添加一些东西，比如每个循环上的“ForceViewUpdate（）”，或类似的东西？

在此处查看我的示例并打开控制台以查看正在更新的值： https://stackblitz.com/edit/angular-5zlja4?file=app%2Fapp.component.ts

Answer 1

等待的方式会阻塞整个jsvascript线程。如果您阻止运行while循环的线程，Javascript将在单个线程上运行，您不会让任何其他代码执行，包括UI更新。您应该使用setTimeout一段时间后运行代码，或者，您可以使用aync/await和Promises为代码提供更顺序的感觉：

export class AppComponent  {
    sStatus = "Inactive";
    iProgressMax = 100;
    iProgressValue = 0;

  async Run() {
    this.sStatus = "Running...";
    while (this.iProgressValue < this.iProgressMax) {
      await this.wait(1000);
      this.iProgressValue = this.iProgressValue + 20;
      console.log(this.iProgressValue);
    }
    this.sStatus = "Complete";
  }

  wait(ms: number)  {
    return new Promise((resolve)=> {
      setTimeout(resolve, ms);
    });
  }
}

Angular 5更新视图从While循环

1 个答案: