AgGrid RowData 在 Angular 组件外部更新，需要重绘行答案

【问题标题】：AgGrid RowData updated outside Angular component, needs rows to be redrawnAgGrid RowData 在 Angular 组件外部更新，需要重绘行
【发布时间】：2019-04-29 20:11:24
【问题描述】：

我在我的 Angular 项目中使用 ag-grid-angular。我的app 组件包含我的主要数据模型（rowData）和两个子组件grid 和grid-details。 grid 组件有一个@Input 绑定到rowData，并保存rowData 也绑定到的ag-grid-angular 组件。 grid-detail 组件还有一个 @Input 来绑定到模型，并且有一个可以更改 rowData 的表单。

我已将应用程序抽象为StackBlitz

当我更改ag-grid-angular 中的数据时，我可以看到app 和grid-details 中rowData 的变化，这意味着跨组件正确绑定了属性。当我在grid-details 中更改rowData 时，我可以看到app 中的更改，但ag-grid-angular 中的数据表示没有更新。当调用gridApi 重绘行时，数据正确呈现（暗示数据也正确绑定，因为我不需要在gridApi 中再次设置行数据）。

如果所有数据都正确绑定，为什么ag-grid-angular不自动刷新？
调用gridApi.redrawRows() 的简单模式是什么？我的实际实现中有多个组件，并且希望以某种方式捕获所有 onChange，而不是为每个子组件实现一些 @Output 事件发射器。

我尝试过的：我尝试通过 Angular 的 OnChanges 实现对 gridApi.redrawRows() 的调用，但我意识到 rowData 实例中的值更改不会调用 OnChanges 生命周期钩子。所以在我的情况下，当我更改 grid-details 中的数据时，OnChanges 不会被调用。

【问题讨论】：

标签： angular ag-grid-angular

【解决方案1】：

这听起来像是正常的 Angular 变化检测行为。

大概，您的 rowData 变量是一个数组，并且您正在更新数组中的一个项目。

但是，要触发更改检测，您需要替换数组的实例。所以你可以，例如做一些像

this.rowData = [...this.rowData]

【讨论】：