Ag 网格删除行并更新 table

Question

我为 ag 网格创建了一个具有删除功能的单独组件。单击删除按钮时，删除方法收到该单行数据，我可以进行删除调用。现在如何在删除后更新 table ？我在想，如果我可以从 table 中过滤掉已删除的行并将其发送回 table，而不是再次向后端调用 api 以再次获取数据。但是我该怎么做，因为我在一个单独的组件中，我没有整个 table 数据，只有一行数据？

HTML

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 500px;"
    class="ag-theme-alpine"
    domLayout='autoHeight'
    [rowData]="rowData"
    [gridOptions]="gridOptions"
    [frameworkComponents]="frameworkComponents"
>
</ag-grid-angular>

buttonRenderer 组件的代码

public onDelete = async ($event) => {
  if ((await this.teamService.deleteTeamMember(this.params.node.data._id)) === false) 
{
  return;
}
  this.notification.success('Team member deleted successfully.');
//this.team = this.team.filter((item) => item._id !== customer._id);
};

网格组件

this.gridOptions = {
        suppressMenuHide: false,
        columnDefs: [
        { headerName: 'Name', field: 'fullName', width: 150, sortable: true, filter: true },
        { headerName: 'Email', field: 'email', width: 170, sortable: true, filter: true, tooltipField: 'email'},
        {
          suppressMovable: true,
          headerName: 'Status',
          width: 100,
          field: 'disabled', cellRenderer: (params) => 
          params.data.disabled === false ? `<img src="assets/images/check.svg">` : `<img src="assets/images/minus.svg">`
        },
        { 
          headerName: 'Last Login', 
          field: 'lastLoginDate', 
          sortable: true, 
          filter: true,
          cellRenderer: (params) => params.data.lastLoginDate ? 
          new Date(params.data.lastLoginDate).toISOString().split('T')[0] + 
          `<img src="assets/images/clock.svg">` +
          new Date(params.data.lastLoginDate).toISOString().split('T')[1] : ``
        },
        {
          headerName: 'Created',
          width: 130,
          field: 'dateCreated',
          cellRenderer: (params) => new Date(params.data.dateCreated).toISOString().split('T')[0],
          sortable: true, 
          filter: true
        },
        {
          cellRenderer: 'buttonRenderer',
          cellRendererParams: {
            onClick: this.onBtnClick1.bind(this),
            label: 'Click 1'
          }
        },
       ],
      }

Answer 1

如果它是一个简单的 table，那就是 table 没有实现虚拟滚动或延迟加载。您可以尝试在 table 中删除记录的功能被调用后立即使用其索引拼接从 rowData 中删除的记录，然后在拼接后再次将行设置到网格中。

您可以利用网格 API 来实现此目的，如以下 StackBlitz 项目所示。

Answer 2

由于 api 调用成功，您可以 update/delete/add 使用：-

https://www.ag-grid.com/angular-data-grid/data-update-transactions/

this.gridApi?.applyTransaction({ remove: [{ id: rowId }] });

Ag 网格删除行并更新 table

Ag grid delete row and update table

ag-grid

angular