角度2：如何检测阵列中的变化？（@input属性）

Question

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

此组件有两个子组件：一个子组件以树结构显示对象，另一个子组件以表格格式呈现其内容。父级通过@input属性将数组传递给其子级，它们会正确显示内容。一切都如预期。

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

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

我已经阅读了有关DoCheck的内容，但不确定如何运行。

Answer 1

OnChanges 仅当输入属性的实例更改时，生命周期挂钩才会触发。如果你想检查是否输入数组中的元素已经被添加，移动或删除，则可以使用IterableDiffers里面DoCheck的生命周期挂钩，如下所示：constructor(private _iterableDiffers: IterableDiffers) {    this.iterableDiffer = this._iterableDiffers.find([]).create(null);}ngDoCheck() {    let changes = this.iterableDiffer.diff(this.inputArray);    if (changes) {        console.log('Changes detected!');    }}如果需要检测数组中对象的更改，则需要遍历所有元素，并对每个元素应用KeyValueDiffers。（您可以与先前的检查同时进行）。

Answer 2

您始终可以通过将其与空数组合并来创建对该数组的新引用：this.yourArray = [{...}, {...}, {...}];this.yourArray[0].yourModifiedField = "whatever";this.yourArray = [].concat(this.yourArray);上面的代码将更改数组引用，并将触发子组件中的OnChanges机制。

Answer 3

您可以使用IterableDiffers由* ngFor使用constructor(private _differs: IterableDiffers) {}ngOnChanges(changes: SimpleChanges): void {  if (!this._differ && value) {     this._differ = this._differs.find(value).create(this.ngForTrackBy);  }}ngDoCheck(): void {  if (this._differ) {    const changes = this._differ.diff(this.ngForOf);    if (changes) this._applyChanges(changes);  }}