跟踪组件内数组更改的最佳方法是什么？ [复制]答案

【问题标题】：Which is the best way to track changes in an array inside a component? [duplicate]跟踪组件内数组更改的最佳方法是什么？ [复制]
【发布时间】：2019-10-05 03:03:27
【问题描述】：

在 Angular 7 中创建自定义组件时，跟踪数组更改的最佳方法是什么？

例子：

export class Test {
   @Input() myArray = []

 // tell if array was modified (push, pop, reassigned...)
}

另外，有没有更好的方法来做到这一点（比如 observables 等）？为什么？

【问题讨论】：

您是否只想在每次更改时运行一个函数？ ngOnChanges 生命周期方法可能是您正在寻找的。span>
我认为 ngOnChanges 跟踪数组引用。如果我做类似array = [ 'test' ].concat(array) 的事情，它会起作用，但如果我做一个简单的array.push('test');

标签： javascript arrays angular typescript angular-changedetection

【解决方案1】：

我会使用 ngOnChanges() 来完成它，它是 Angular 生命周期钩子之一。您可以在哪里找到以下信息：

如果是第一次更改。
当前值是多少。
之前的值是多少。

它的类型是：SimpleChange

ngOnChanges(changes: SimpleChanges){
 // Detect Changes
  let myArrayChange = changes['myArray'];
  let currentValue = myArrayChange.currentValue;
  let previousValue = myArrayChange.previousValue;
}

此外，Angular 更改检测仅检查对象身份，而不是对象内容，因此不会检测到 push、pop。 因此，您可以做的是在分配此输入的子组件中，而push，使用Array的slice()方法推送不同的对象

子组件 HTML：

<test myArray="arr"></test>

子组件 TS：

export class Child{

    arr: any = [];

    someMethod(){
        this.arr.push('new element');
        this.arr = this.arr.slice();
    }
}

【讨论】：

我认为 ngOnChanges 跟踪数组引用。如果我做类似array = [ 'test' ].concat(array) 的事情，但如果我做一个简单的array.push('test'); 就不行
push() 后跟 slice() 应该可以工作。
或者：this.arr = [...this.arr, 'new element'] 也可以。它会创建一个新数组。