Ag-grid 高亮单元格逻辑无法正常工作

Question

我使用 ag-grid 创建了一个可编辑的网格，我需要突出显示已更改的单元格。我添加了以下代码：

    (cellValueChanged)="onDemandsCellValueChanged($event)"

以及方法：

    onDemandsCellValueChanged(params): void {
    if (params.oldValue === params.newValue) {
      return;
    }

    params.data.modified = true; // add modified property so it can be filtered on save

    const column = params.column.colDef.field;
    params.column.colDef.cellStyle = { 'background-color': '#e1f9e8' }; // highlight modified cells
    params.api.refreshCells({
      force: true,
      columns: [column],
      rowNodes: [params.node],
    });
  }

单元格被突出显示，但是当我向上和向下滚动时，该列中的所有单元格都被突出显示。

您可以检查stackblitz上的行为。

此外，如果您有更好的方法，我愿意接受新的解决方案。

Answer 1

我了解您的问题您可以像这样实现您想要的-您应该在列定义中使用cellStyle，如docs 所示，此代码如下

cellStyle: params => {
      if (
        params.data["modifiedRow" +
                     params.node.rowIndex +"andCellKey"+ 
                     params.column.colDef.field]
      ) {
        return { backgroundColor: "#e1f9e8" };
      } else {
        return null;
      }
    },

然后在此函数onDemandsCellValueChanged 中添加并修改此属性modified 为true，并如下所示更改您的函数

onDemandsCellValueChanged(params): void {
    if (params.oldValue === params.newValue) {
      return;
    }
    const column = params.column.colDef.field;
    params.data["modifiedRow" + params.rowIndex + "andCellKey" + column] = true;
    params.api.refreshCells({
      force: true,
      columns: [column],
      rowNodes: [params.node]
    });
  }

现在，即使您滚动它也应该可以工作。这里是完整的working Example on stackblitz