angular - 如何在 igx-grid 中的行编辑期间以编程方式更新值？

Question

我正在使用 Angular 11 和当前的Ignite UI Agnular。

我有一个网格，其中包含用户可以编辑的列（名称、活动、类型等）和其他他们不能编辑的列（在其他屏幕、审计列等中更改的参数）：

<igx-grid #grid [data]="data" width="100%" height="500px" [primaryKey]="'ProductID'" [rowEditable]="true">
    <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>

我想知道如何在行编辑完成后以编程方式修改“UpdatedBy”和“UpdatedDate”列？

Answer 1

可以处理rowEditDone事件以手动更改当前行对象的目标属性值：IgxGridComponent

public rowEditDoneHandler(args: IGridEditDoneEventArgs) {
      const currRowIndex = this.data.indexOf(args.rowData);
      this.data[currRowIndex].UpdatedBy = this.username || 'Anonymous';
      this.data[currRowIndex].UpdatedDate = new Date();
      this.data = [...this.data];
}

这里还有一个 StackBlitz 示例演示了这种方法。