gpt4 book ai didi

angular - 当 RowData 更改时,Angular 中的 Ag-grid 不会刷新

转载 作者:太空狗 更新时间:2023-10-29 17:18:46 46 4
gpt4 key购买 nike

我已经在 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 上。

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

最佳答案

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 - 当 RowData 更改时,Angular 中的 Ag-grid 不会刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50320941/

46 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com