Ag-Grid 编辑单元格颜色（如果已编辑）答案

【问题标题】：Ag-Grid Edit Cell Color If EditedAg-Grid 编辑单元格颜色（如果已编辑）
【发布时间】：2021-09-10 23:06:55
【问题描述】：

这是我的打字稿代码，我在 html 中的 <ag-grid-angular> 中应用了 (cellValueChanged)="onCellValueChanged($event)"。但是它不会在编辑后立即更改单元格的颜色，而是在编辑两次后更改。

onCellValueChanged(params:any){
    if(params.oldValue != params.newValue) {
      params.colDef.cellStyle =  { backgroundColor: 'green'}; 
    }
    console.log(params);
    console.log(this.agGrid.api.refreshCells());
  }

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

首先，为了解决你的问题，你需要在调用api.refreshCells()时强制刷新：

var p = {
  force: true
};
this.gridApi.refreshCells(p);

这将在编辑后第一次更改单元格样式。

其次，您正在更新整个列的单元格样式，而不是特定单元格。您应该做的是在列定义上设置cellStyle，以在单元格已被编辑时显示您的绿色背景。这意味着您需要保留已编辑单元格的记录。

columnDefs = [
    {
      field: 'make',
      editable: true,
      cellStyle: params => {
        debugger;
        if (this.editedRowIndexes.includes(params.node.rowIndex)) {
          return { backgroundColor: 'green' };
        }
      }
    },
    { field: 'model' },
    { field: 'price' }
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

  gridApi;
  editedRowIndexes = [];

  onGridReady(params) {
    this.gridApi = params.api;
  }

  onCellValueChanged(params: any) {
    if (!this.editedRowIndexes.includes(params.node.rowIndex)) {
      this.editedRowIndexes.push(params.rowIndex);
    }
    this.editedRowIndexes.push(params.rowIndex);
    var p = {
      force: true
    };
    this.gridApi.refreshCells(p);
  }

每次编辑单元格时，将rowIndex 记录在数组editedRowIndexes 中，然后使用该数组确定是否应显示绿色背景。

Demo.

【讨论】：

我希望它不仅适用于特定列，而且适用于所有列