将数据推送到输入（）未被检测到：Angular 4

Question

我有一个父组件，其中包含一个名为'data'的对象，其中包含一些我想在UI上显示的数据。数据显示在表格中，我创建了一个包含该表格的子组件。因此，在调用表组件时，我将数据作为@Input（）传递。

//父组件模板

<display-data [data]='data'></display-data>

除了显示之外，我的父组件中有两个修改此数据属性的方法。其中一个重新分配数据数组如下：

setNewData() {
  this.data = this.response.content;
}

另一种方法将新数据推送到现有数据：

addNewData(newData: Array) {
  this.data.push(...newData);
}

因为我正在使用Angular Input（），我假设每当我修改父组件中的数据对象（重新分配或添加更多数据）时，子组件中的data属性将立即更新将在UI上看到新数据。这按预期工作。 但是，当我尝试查看Angular的生命周期钩子'ngOnChanges'时，我注意到它只在重新赋值时被调用，而不是在数据对象中推送一些新数据时。

这是ngOnChanges的工作原理吗？因为我想在子组件中的数据发生变化时调用方法。

Answer 1

是的，这正是ngOnChanges的工作方式。

仅在重新分配时才会调用ngOnChanges。

如果您希望在此数据发生更改时执行方法，则可以执行以下操作。

1. 使用成员变量数据和返回此变量的函数创建服务。
2. 父组件可以使用此服务的方法来获取和更新此变量。
3. 服务还包含一个事件发射器对象，可以由子组件订阅。
4. 因此，现在只要父组件调用服务方法来更新数据值，就可以执行该操作并在EventEmitter对象上发出。

如果你想要某种代码，请告诉我。但是如果你自己编码，你会理解很多。