Angular 组件外的 Ag Grid RowData 更新，需要重绘行

AgGrid RowData updated outside Angular component, needs rows to be redrawn

我在我的 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 中再次设置行数据）。

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

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

中的数据时，不会调用 OnChanges

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

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

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

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