小编典典

角度2:如何检测阵列中的变化?(@input属性)

javascript

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

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

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

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

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


阅读 256

收藏
2020-05-01

共1个答案

小编典典

OnChanges 仅当输入属性的实例更改时,生命周期挂钩才会触发。

如果你想检查是否输入数组中的元素已经被添加,移动或删除,则可以使用IterableDiffers里面DoCheck的生命周期挂钩,如下所示:

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。(您可以与之前的检查同时进行)。

2020-05-01