每次触发setInterval时,Observable.of(数组)都会更新

时间:2017-11-23 21:42:06

标签: angular rxjs observable ionic3

使用Observable.of(array)和angular的异步管道时,我有一些奇怪的行为。也许我使用它错了,但我无法理解。

我在Ionic 3(角度4)中有一个view.html和view.ts文件。我正在做一个Observable.of(项目)。 Items只是一个包含对象的数组。在我看来,我有:让项目项目|异步。这一切都很好但是当我在view.ts中每隔1000毫秒做一次setInterval时...视图每1000毫秒更新一次。即使setInterval没有做任何事情!

我使用它错了吗?我无法理解这种行为..!

2 个答案:

答案 0 :(得分:1)

以这种方式“修补”setInterval方法,它会触发更改检测周期。

查看here了解更多信息。

链接的一些相关部分:

  

基本上应用程序状态更改可能由三件事引起:

     

活动 - 点击,提交,...

     

XHR - 从远程服务器获取数据

     

计时器 - setTimeout(),setInterval()

     

它们都是异步的。这让我们得出结论,   基本上每当执行一些异步操作时,我们的   应用程序状态可能已更改。这是有人需要的时候   告诉Angular更新视图。

     

谁通知Angular?

     

好的,我们现在知道导致应用程序状态变化的原因。但是它告诉了什么   Angular,在这个特定时刻,视图必须更新?   Angular允许我们直接使用本机API。没有   我们必须调用拦截器方法,以便Angular得到通知更新   DOM。这是纯粹的魔法吗?如果您关注我们的最新文章,   你知道Zones会照顾这个。事实上,Angular带来了它   自己的区域叫做NgZone,我们在文章Zones中写过   在Angular。您可能也想阅读它。简短的版本是,   在Angular的源代码中,有一个叫做的东西   ApplicationRef,它监听NgZones onTurnDone事件。每当   这个事件被触发,它实际上执行了tick()函数   执行变更检测。

答案 1 :(得分:0)

使用OnPush策略。使用此策略,仅评估受影响的项目,即触发事件或以其他方式标记以进行检查的组件。此外,项目在浅模式下进行比较,这意味着只检查引用。这要求您不要改变对象。

从@ angular / core导入ChangeDetectionStrategy,然后将changeDetection:ChangeDetectionStrategy.OnPush添加到@Component装饰器。

例如,代替vast使用this.array.push(value)

当值异步更新时,如在http调用或计时器中,添加ChangeDetectorRef并在回调上调用this.array = this.array.concat(value)