Question

当用户更新网格中的值时，我正在发出数据请求。我希望启动请求时，单元格背景变为橙色。请求完成后，我希望单元格闪烁绿色，然后再恢复为默认背景色。

这是我当前的onCellValueChanged方法的简化版本。

onCellValueChanged(params) {
    // I thought this would change the background to orange, 
    // but strangely, it does nothing the first time, 
    // then permanently changes the background to orange if I edit the cell again.
    params.colDef.cellStyle = {backgroundColor: 'orange'};
    // This is my data request (works)
    this.queryService.getData().then(data => {
        const cellLocation = {
            rowNodes: [this.gridApi.getDisplayedRowAtIndex(params.rowIndex)],
            columns: [params.colDef['field']]
        };
        // The cells flash correctly
        this.gridApi.flashCells(cellLocation);
        // This seems to do nothing. I thought it would clear the orange background.
        params.colDef.cellStyle = undefined;
        // I thought refreshing the grid api might make cell Styles apply, but it doesn't seem to have an impact
        this.gridApi.refreshCells(cellLocation);
        }
    }).catch(err =>
    { 
        // This error check works if my data request fails
        console.warn(err);
    });
}

根据代码段注释，getData请求正在运行并且单元格正在闪烁，但是单元格的背景颜色直到第二次编辑后才改变，此后永久变为橙色。这是正确的方法吗？如果是这样，我该如何做？如果没有，有没有人有任何建议？

Answer 1

发现问题出在refreshCells函数中。我需要改用redrawRows函数。

首先，我需要获取当前行：

const row = this.gridApi.getDisplayedRowAtIndex(params.rowIndex);

然后我需要在更改单元格样式后刷新该行：

params.colDef.cellStyle = {backgroundColor: 'orange'};
this.gridApi.redrawRows({rowNodes: [row]});

然后在删除样式时我需要做同样的事情：

params.colDef.cellStyle = undefined;
this.gridApi.redrawRows({rowNodes: [row]});

在由单元格编辑触发的异步方法完成之前和之后，如何在Ag Grid中更改单元格样式？

1 个答案: