Angular 5 从 While 循环内更新视图

Question

我的应用程序中有一个进度条，它使用 while 循环进行更新。我可以成功地更改每个循环的更新进度值，但视图仅在整个 while 循环完成后更新。有什么方法可以在 while 循环中添加一些内容，例如每个循环上的“ForceViewUpdate()”或类似的内容？

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

Answer 1

您等待的方式会阻塞整个 jsvascript 线程。Javascript 在单个线程上运行，如果您阻止该线程运行while循环，您将不会让任何其他代码执行，包括 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);
    });
  }
}