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

Posted 2023-01-31

我在Angular项目中使用ag-grid-angular。我的app组件包含我的主要数据模型（rowData）和两个子组件grid和grid-details。 grid组件有一个@Input与rowData绑定，并持有ag-grid-angular组件，rowData也绑定。 grid-detail组件也有一个@Input绑定到模型，并有一个形式，其中rowData可以改变。

我已经在StackBlitz中抽象了这个应用程序

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

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

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

答案

这听起来像正常的角度变化检测行为。

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

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

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