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

Question

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

我在下面的 StackBlitz 中设置了这种情况 link:

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 solution link

<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);
  }

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

Ag-grid in Angular does not refresh when RowData is changed

typescript

ag-grid

angular

angular6

stackblitz