使用 setInterval 时 Angular2 视图未更新答案

【问题标题】：Angular2 View not updated when using setInterval使用 setInterval 时 Angular2 视图未更新
【发布时间】：2017-06-07 14:30:57
【问题描述】：

我正在使用 Angular2 RC5 - 我有一个奇怪的问题。在我的主要组件中，我在构造函数中用于测试目的：

 setInterval(() => {
        this.test = new Date().getMilliseconds().toString();           
    }, 500);

我的模板中的绑定是

<p>{{test}}</p>

在加载或重新加载页面时，它要么显示一个值（但在进一步的滴答声中不会改变），有时它会按预期工作（在每个滴答声上更新值），有时只显示初始值并且根本不改变.似乎是随机的。

我对此感到很疯狂，因为在官方 plunker 版本中它似乎没有问题。（编辑：Plunker link）

在其他组件中使用此代码时，我也会得到相同的行为..

有人知道吗？

【问题讨论】：

尝试在 ngOnInit 中执行此操作而不是作为标准。无论如何，这都是最佳实践，尤其是对于单元测试，因为您无需记住任何变量依赖项即可创建组件。让我知道这是否有帮助。看起来确实很奇怪。
谢谢，我试过了.. 它没有帮助.. 我什至从我的 polyfills.ts (webpack) 中删除了 es6-shim，因为我读到了加载顺序可能会造成一些麻烦。 . 但这也没有用.. :(
您可以改用Observable.interval()。

标签： angular

【解决方案1】：

使用这个，这对我来说很好。

从 'rxjs/Observable' 导入 { Observable }；

Observable.interval(500)
    .subscribe(() => {
    this.test = new Date().getMilliseconds().toString();    
})

【讨论】：

谢谢，那将是另一种方法。但在我写这个问题的时候，这确实是一个 fontawesome 的错误。我不知道它现在是否已经修复，因为那时我从 fontawesome 切换到 material icons。
好的，但是我在使用 setInterval 时遇到了同样的问题，使用 Observable.interval() 效果更好。标记正确，有人可能会得到他们正在寻找的答案......像我一样:)
虽然这是setInterval 的另一种做法，但我认为这不是正确的答案。对我来说，这是我代码中其他地方的一个问题，它导致了内存泄漏，从而减慢了 DOM 的更新速度（类似于 @Mr.Muh 提到的）

【解决方案2】：

我知道这听起来很疯狂，但是当我注释掉

<script src="https://use.fontawesome.com/f0298bc7e9.js"></script>

在我的 index.html 中一切正常。我不知道为什么或如何... 这似乎就是原因。用线：奇怪的行为。没有：一切正常。
更奇怪的是：我无法在“官方”plunker 上重现它......

【讨论】：