angular - Ag 网格删除行和更新表

问题描述

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

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'
          }
        },
       ],
      }

标签： angularag-grid

angular - Ag 网格删除行和更新表

问题描述

解决方案

推荐阅读