Angular 2：如何检测数组中的变化？ （@input 属性）

Question

我有一个使用 ajax 请求检索对象数组的父组件。

该组件有两个子组件：一个以树形结构显示对象，另一个以表格格式呈现其内容。父母通过 @input 属性将数组传递给他们的孩子，他们正确地显示内容。一切如预期。

当您更改对象中的某些字段时会出现问题：子组件不会收到这些更改的通知。仅当您手动将数组重新分配给其变量时，才会触发更改。

我习惯使用 Knockout JS，我需要获得类似于 observableArrays 的效果。

我读过一些关于 DoCheck 的文章，但我不确定它是如何工作的。

原文由 pablolmedorado 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

OnChanges Lifecycle Hook 仅在输入属性的实例更改时才会触发。

如果要检查输入数组中的某个元素是否被添加、移动或删除，可以在 DoCheck Lifecycle Hook 中使用 IterableDiffers ，如下所示：

 constructor(private iterableDiffers: IterableDiffers) {
    this.iterableDiffer = iterableDiffers.find([]).create(null);
}

ngDoCheck() {
    let changes = this.iterableDiffer.diff(this.inputArray);
    if (changes) {
        console.log('Changes detected!');
    }
}

如果需要检测数组内对象的变化，则需要遍历所有元素，并为每个元素应用 KeyValueDiffers 。 （您可以与之前的检查并行执行此操作）。

访问这篇文章了解更多信息： Detect changes in objects inside array in Angular2

原文由 seidme 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

与其通过 concat 方法触发变更检测，不如使用 ES6 解构运算符更优雅：

 this.yourArray[0].yourModifiedField = "whatever";
this.yourArray = [...this.yourArray];

原文由 fonzane 发布，翻译遵循 CC BY-SA 4.0 许可协议