Angular，更新视图长计算

Question

我在尝试使用 Angular 4.

实现微调器时遇到问题

我有一个复杂的应用程序，它运行复杂而耗时的计算。在 运行 我想显示微调器的计算之前。为了做到这一点：

1. 我将变量设置为 "true" 以显示微调器
2. 我做复杂的计算
3. 我将变量设置回 "false" 以隐藏微调器

问题是微调器不会显示。

在下面的例子中，为了方便理解，我伪造了复杂的方法。

https://stackblitz.com/edit/angular-eqo9cl

谁能知道如何解决这个问题？

似乎在启动计算之前无法刷新视图。我们还可以看到 "val" 变量在计算完成之前不会在视图中更新。

感谢阅读:)

Answer 1

为了让浏览器有机会在计算开始之前更新视图，您可以 运行 它们与 setTimeout 异步。有关演示，请参阅 this stackblitz。

doWork() {
  this.spinner = true;
  setTimeout(() => {
    this.performCalculations();
    this.spinner = false;
  }, 50);
}