Angular2 没有检测到 Array 的变化答案

【问题标题】：Angular2 doesn't detect changes in ArrayAngular2 没有检测到 Array 的变化
【发布时间】：2016-12-16 13:01:27
【问题描述】：

我正在进行 Ionic2 / Angular2 项目。我有一个

*ngFor="let item of items | async | customPipe"

在我的代码中。 async 是因为 items 是 Observable<Item[]>。我的customPipe 在第一次运行时工作正常。但是，当我对其进行任何更改时，如果通过我的customPipe 将其过滤掉的项目仍会显示。

有什么问题？ *ngFor 是否只运行一次？还是我必须强制更新 DOM？感谢您的帮助。

【问题讨论】：

【解决方案1】：

根据 Angular2 管道文档：

Angular 仅在检测到输入值发生纯变化时才会执行纯管道。纯粹的更改要么是对原始输入值（字符串、数字、布尔值、符号）的更改，要么是更改的对象引用（日期、数组、函数、对象）。

Angular 会忽略（复合）对象内的变化。如果我们更改输入月份、添加到输入数组或更新输入对象属性，它不会调用纯管道。

原因：

这可能看起来有限制，但也很快。对象引用检查速度很快——比深度检查差异快得多——因此 Angular 可以快速确定它是否可以同时跳过管道执行和视图更新。

因此，当您更改数组或数组中的元素时，数组引用不会改变。

因此切换到.onPush 或手动触发更改检测可能会解决您的问题。

【讨论】：

感谢您的链接。我现在将管道更改为pure: false，它现在按预期工作。你能告诉我更多关于.onPush的细节吗？它有什么作用以及放在哪里？谢谢
@SoS 您只需在 @Component 注释中添加一个 changeDetection: ChangeDetectionStrategy.OnPush 即可。它告诉 Angular 将任何输入视为不可变的。如果您有兴趣，当然可以在网上找到更详细的信息。
使用 changeDetection:ChangeDetectionStrategy.OnPush 并手动触发 ChangeDetectorRef detectChanges() 对我不起作用
@teejay 你能在 plunker 上复制它吗？

【解决方案2】：

老问题，但我也偶然发现了在数组更改时触发纯管道的问题。

为了让纯管道知道数组发生了变化，我们需要传递数组的新引用。因此，对于项目，您可以这样尝试：

this.items = changedItems.slice();

【讨论】：