Angular，更新视图长计算

Question

我在尝试使用Angular 4实现微调器时遇到了问题。

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

1. 我将变量设置为＆＃34; true＆＃34;显示微调器
2. 我进行复杂的计算
3. 我将变量设置为＆＃34; false＆＃34;隐藏微调器

问题是旋转器不会显示。

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

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

任何人都可以知道如何解决这个问题吗？

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

感谢阅读：）

Answer 1

要允许浏览器在计算开始之前更新视图，您可以使用setTimeout异步运行它们。有关演示，请参阅this stackblitz。

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