Angular 11中igx-grid行编辑完成后如何编程更新指定列值？

DevOps 小满

2026-10-20

实现方案

步骤1：给igx-grid绑定行编辑完成事件

首先给现有表格添加rowEditDone事件绑定，该事件会在用户提交行编辑后触发：

<igx-grid #grid [data]="data" width="100%" height="500px" [primaryKey]="'ProductID'" [rowEditable]="true"
  (rowEditDone)="onRowEditDone($event)">
  <igx-column field="ProductName" header="ProductName" [dataType]="'string'"></igx-column>
  <igx-column field="UpdatedBy" [dataType]="'string'" [editable]="false"></igx-column>
  <igx-column field="UpdatedDate" [dataType]="'date'" [editable]="false"></igx-column>
</igx-grid>

步骤2：在组件类中实现事件处理逻辑

在对应的TS组件文件中实现事件回调，直接修改编辑行的对应字段即可，editable=false仅限制用户UI层面的编辑操作，不会影响代码修改数据源：

import { Component, ViewChild } from '@angular/core';
import { IgxGridComponent, IGridEditDoneEventArgs } from 'igniteui-angular';

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  @ViewChild('grid', { static: false }) public grid!: IgxGridComponent;
  public data: any[] = [];
  // 示例：当前登录用户，可替换为实际业务中获取的当前登录账号
  private currentLoginUser = 'zhangsan';

  public onRowEditDone(event: IGridEditDoneEventArgs): void {
    // 获取当前完成编辑的行数据
    const editedRow = event.rowData;
    // 直接赋值修改审计字段
    editedRow.UpdatedBy = this.currentLoginUser;
    editedRow.UpdatedDate = new Date();

    // 如果你使用不可变数据流，可主动调用updateRow方法触发视图刷新：
    // this.grid.updateRow(editedRow, editedRow.ProductID);
  }
}