Ag Grid删除单行后如何不重调后端接口更新表格数据？

两种实现方案二选一即可：

方案1：直接通过AG Grid内置API删除行（最便捷） #

AG Grid的自定义cellRenderer参数中自带全局gridApi实例，不需要获取完整rowData，直接调用事务更新接口删除当前行即可，仅需修改你的buttonRenderer组件的onDelete方法：

public onDelete = async ($event) => {
  if ((await this.teamService.deleteTeamMember(this.params.node.data._id)) === false) {
    return;
  }
  this.notification.success('Team member deleted successfully.');
  // 新增以下代码直接删除当前行
  this.params.api.applyTransaction({
    remove: [this.params.node.data]
  });
};

说明：applyTransaction是AG Grid提供的局部更新能力，只会重渲染受影响的行，性能远高于全量替换rowData，不需要额外和父组件通信，适合不需要额外同步rowData到父组件其他业务逻辑的场景。

方案2：通过父组件回调同步更新rowData（需同步父组件rowData状态可选） #

如果你的业务需要父组件维护的rowData和表格数据保持同步，可以通过cellRenderer的自定义参数传递父组件的删除回调：

第一步：修改表格组件配置，传递回调 #

// 表格组件内新增删除行方法
onDeleteRow = (deleteId: string) => {
  // 过滤掉已删除的行，更新父组件的rowData
  this.rowData = this.rowData.filter(item => item._id !== deleteId);
}

this.gridOptions = {
  suppressMenuHide: false,
  columnDefs: [
    // 其余列配置保持不变
    {
      cellRenderer: 'buttonRenderer',
      cellRendererParams: {
        onClick: this.onBtnClick1.bind(this),
        label: 'Click 1',
        // 新增删除成功回调
        onDeleteSuccess: this.onDeleteRow.bind(this)
      }
    },
  ],
}

第二步：修改buttonRenderer组件，调用回调更新数据 #

public onDelete = async ($event) => {
  const deleteId = this.params.node.data._id;
  if ((await this.teamService.deleteTeamMember(deleteId)) === false) {
    return;
  }
  this.notification.success('Team member deleted successfully.');
  // 调用父组件传过来的回调更新rowData
  this.params.onDeleteSuccess(deleteId);
};

内容的提问来源于stack exchange，提问作者Ehsan Nissar