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

我有一个名为'data'的对象的父组件，其中包含一些我想要在UI上显示的数据。数据显示在一个表格中，并且我创建了一个包含该表格的子组件。因此，在调用表组件时，我将数据作为@Input（）传递。将数据推送到输入（）未检测到：角4

//父componene模板

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

上显示的顶部，我在修改该数据属性我父组件两种方法。其中一个是重新分配数据阵列是这样的：

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

和其他方法推新数据已经存在的数据：

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

因为我采用了棱角分明的输入（）我假设无论何时我修改父组件中的数据对象（重新赋值或添加更多数据），子组件中的数据属性都会立即更新，我将在UI上看到新数据。这按预期工作。但是，当我试着看Angular的生命周期钩子'ngOnChanges'时，我注意到它只在重新分配时才被调用，而不是当我在数据对象中推入一些新数据时。

这是如何ngOnChanges的作品？因为我想在子组件中的数据发生更改时调用方法。

来源

2017-08-27 Aiguo

另一种方法是将源数组中的每个项目传递给单个组件@Input（）以跟踪每个项目的更改。而不是整个阵列。 –

是的，这正是ngOnChanges的工作原理。

只有在重新分配发生时才会调用ngOnChanges。

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

使用成员变量数据创建一个服务，并返回一个返回该变量的函数。
父组件可以使用此服务的方法来获取和更新此变量。
服务还包含一个事件发射器对象，它可以由子组件订阅。
所以，现在无论父组件调用服务方法来更新数据的值，都可以这样做，并且还会在EventEmitter对象上发出。

让我知道你是否想要某种代码。但是如果你自己编码，你会理解很多。

来源

2017-08-27 15:25:52

谢谢阿曼。即使我曾想过为父母和孩子的组件交流做同样的事情，但只是想对ngOnChanges（）进行一些澄清。我想我会创建一个服务，而不是使用输入进行通信。再次感谢！ – Aiguo

很高兴我能帮忙:) –

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

回答

相关问题