更改RowData时，Angular中的Ag-grid不刷新

Question

我已经在Angular 6中完全设置了一个ag-grid，它在页面启动时可以正确显示所有rowData。但是，将项目添加到rowData时，ag-grid的显示不会更新。

我在以下StackBlitz链接中设置了这种情况：

https://stackblitz.com/edit/ag-grid-error?file=src/app/app.component.ts

我进行了设置，以便每次单击顶部的按钮时，都会向rowData添加一个项目，并将rowData记录到控制台（在右下方访问）。我遇到的问题是，当我单击按钮更新rowData时，ag-grid不会显示新项目。

有趣的是，如果您在编辑器中删除代码的任何部分并重新输入以更新显示，新项目将显示在ag-grid上。

预先感谢任何知道如何解决此问题的人。

Answer 1

将gridReady事件添加到网格HTML中，并用于this.gridApi.setRowData(this.rowData)在添加新行后刷新网格数据。

StackBlitz解决方案链接

<ag-grid-angular
  style="width:100%;height:90vh"
  class="ag-theme-balham"
  [gridOptions]="gridOptions"
  [columnDefs]="columnDefs"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

如下更新您的app.component.ts代码

  private gridApi;
  private rowData = [];

  onGridReady(params) {
    this.gridApi = params.api; // To access the grids API
  }

  addItem() {
    this.rowData.push({ item: "item" });   // Add new Item 
    this.gridApi.setRowData(this.rowData); // Refresh grid
    console.log(this.rowData);
  }