Question

角度6.0.1。

这个问题正在一个大型应用程序中显现，但是我创建了一个简单的组件来尝试查看发生了什么。这个简单的组件有一个简单的模板：

{{myProp}}

在ngOnInit中，我设置了this.myProp = 'hello';，并且在屏幕上看到了 hello 一词，正如我所期望的那样。到目前为止一切顺利。

但是，如果我现在尝试更新myProp中的setTimeout的值，它将永远不会更新UI：

this.myProp = 'hello';
setTimeout(() => {
  this.myProp = 'goodbye';
}, 3000);

UI中显示的值仍然是你好。

如果我在构造函数中注入ChangeDetectorRef并在计时器内调用cdr.detectChanges()，则UI会更新。

这是预期的行为，还是我做错了什么？我不希望为此打电话给detectChanges。我尚未更改组件的ChangeDetectorStrategy，所以它仍然是default。

请注意，在“真实”应用中，我不是在计时器中更新myProp，而是在Observable订阅中进行更新。 UI没有在那里更新，这就是促使我进行调查并在计时器处结束的原因，因为这是问题的最简单再现。据我所知，以任何一种异步方式更新属性值都不会在UI中显示更改。

更新

我认为我对setTimeout的引用使事情感到困惑。我使用它作为调试手段。我没有尝试重新处理此问题，而是在此处（Angular interpolated value not updating on subscription）发布了一个新的问题，提供了更好的解释和ngRx代码，这使我感到悲伤。谢谢。

更新＃2 该问题是由将其ChangeDetectionStrategy设置为OnPush的父组件引起的。请参阅我上面提到的问题。

谢谢

TTE

Answer 1

这是预期的操作。 javascript方法Window setTimeout是Window命令。这意味着它在主zone.js线程（这是指在Angular应用程序中即装即用的常规更改检测）之外进行调用，这是预期的计划。如果要包含您的 setTimeout（）方法，则需要将其分配给Angular TypeScript应用程序中包含的变量。

在window：the Window setInterval() Method

中调用的同一函数系列中使用类似方法时，此行为是最明显的

您可以包含此方法以及类似的Window方法。 setTimeout（）命令需要附加一个ChangeDetectorRef来检测更改，以便收听已发出的事件。您还可以通过将执行的方法分配给组件变量来插入命令（类似于关于如何在破坏组件here之后停止 setInterval（）的答案）。

超时更改时，角插值显示不更新

1 个答案: