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

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 中的单元格样式？

How do I change cell styles in Ag Grid before and after completion of async method triggered by cell edit?

asynchronous

typescript

ag-grid

angular

ag-grid-angular