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

时间:2019-04-29 06:04:58

标签: angular ag-grid-angular

我在Angular项目中使用ag-grid-angular。我的app组件保存着我的主数据模型(rowData),以及两个子组件gridgrid-detailsgrid组件具有一个@Input可以绑定到rowData,并拥有ag-grid-angular也绑定到的rowData组件。 grid-detail组件还具有一个@Input来绑定到模型,并且具有可以更改rowData的形式。

我已经在StackBlitz

中提取了应用程序

当我在ag-grid-angular中更改数据时,我可以在rowDataapp中看到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生命周期钩子并未在{的实例中的值更改上被调用{1}}。因此,在我的情况下,当我在rowData中更改数据时,不会调用OnChanges

1 个答案:

答案 0 :(得分:0)

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

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

但是,要触发更改检测,您需要替换阵列的实例。因此,您可以例如进行

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