ag-grid colDef 在事件之间似乎不一致

ag-grid colDef appears inconsistent between events

根据 documentation ag-grid 列定义可用于更新单元格 css class。 colDef 对象在列事件中可用,即 newValueHandler 和 cellValueChanged。我正在尝试将其用于 add/remove css classes。

它在 newValueHandler 中有效,但在 onCellValueChanged 中无效。我可以看到这两个事件 args 都公开了一个 colDef 对象,但以下内容仅在 newValueHandler 中有效:

dropdownValueUpdateHandler(p, key) {
        this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code)
            .catch(err => {
                p.colDef.cellClass = 'ag-etp-cell-failed'; // <---- updating cell to show error

最后一行在第一个事件中有效,但在单元格值更改事件中它什么都不做。

更新:尝试使用动态函数,但它也无法正常工作(或者我做错了)

getCellClass(p){
    console.debug('getCellClass ', p);
    return p.data.Status == 'saved'
        ? 'ag-etp-cell-saved'
        : p.data.Status == 'failed'
            ? 'ag-etp-cell-failed'
            : '';

}

在我的 valueUpdatedHanler 中成功:

e.data.Status = 'saved';
e.api.refreshCells([ e.node] , [e.colDef.field]); // this has a weird lag, doesn't refresh correct, doesn't seem to call getCellClass function
e.api.refreshView(); // this works but refreshes the whole grid which can be costly 

更新有点工作,但后续事件似乎滞后,即如果前一个事件失败,下一个成功仍然以失败的形式返回

如果我刷新整个网格,就可以了。但我希望避免这样做,因为它是一个大网格..

更新列定义时,您必须告诉 ag-grid 刷新以获取更改。您可以通过调用 gridAPI.refreshView() 刷新整个网格或 gridAPI.refreshCells(rowNodes, colIds) 仅刷新该单元格来实现。

CellClass 只会将 类 添加到单元格,而不会删除之前添加的单元格。

您可能希望使用 cellClassRules 来处理更复杂的规则

cellClassRules : {
    'ag-etp-cell-failed': function(params) { return params.data.Status === 'failed' },
//etc
},