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

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上显示。

提前感谢任何知道如何解决此问题的人。

- Luke LaValva

Answer 1

在您的网格 HTML 中添加gridReady事件，然后在添加新行后使用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);
  }

- ElasticCode

---

谢谢！它有效了！这对我来说不是绝对必要的，但您知道是否可能使其在更改数组时也能起作用？ - Luke LaValva

欢迎，我希望您能将其设置为答案，您所说的从不同元素更改数组是什么意思？ - ElasticCode

如果我从“hello.component.ts”内的函数中编辑“list.ts”中的数组，那么我也能够从那里更新ag-grid吗？ - Luke LaValva

你可以将 list.ts 改为服务，这样它就可以与其他组件共享。你还可以在服务中添加 rowData，并从 hello.component.ts 向其添加项目。然后，一旦加载了 app.component.ts，你就可以将列表服务的 rowData 作为网格的数据源使用。 - ElasticCode

我不得不更好地学习如何使用服务，但现在我的程序已经完全运行。谢谢！ - Luke LaValva