角度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);

  }

}