时间戳

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

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

问题描述

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

这是我当前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请求正在工作并且单元格正在闪烁，但单元格的背景颜色在第二次编辑之前不会改变，之后它会永久变为橙色。这是正确的方法吗？如果是这样，我怎样才能使这项工作？如果没有，有人有什么建议吗？

标签： angulartypescriptasynchronousag-gridag-grid-angular

解决方案

原来问题出在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]});

推荐阅读