如何在 Angular 7 中强制调用 this.getRowStyle 函数？

Question

我正在使用 getRowStyle 函数，但它似乎只在加载或编辑网格时运行一次。如何手动强制运行此功能以便加载行颜色。

conditonalFormatter() {
    this.GridRef.rowConditionalFormatting('red', this.rowFormatData);
}

rowConditionalFormatting(rowColor, rowFormatData) {
    this.rowFormatData = rowFormatData;
    this.getRowStyle = params => {
            for (let i = 0; i < this.rowFormatData.length; i++) {
                const columnHeader = this.rowFormatData[i].Name;
                const operator = this.rowFormatData[i].Operator;
                const cellValue = this.rowFormatData[i].Value;
                if (params.data[columnHeader] == cellValue) {
                    return {background: rowColor };
                }
            } 
        }
}

Answer 1

如果您想再次手动应用行样式，则需要使用 refreshCells() 手动刷新 Aggrid。

一般来说，只有那些数据发生变化的行会被重绘，而其他行会被忽略。在您的情况下，我们将需要强制 agggrid 重绘行，因此必须使用 force=true

gridApi.refreshCells({
      force: true // skips change detection -> always refreshes the row
   })

你会得到gridApi对象，在aggrid提供的onGridReady回调中。

public onGridReady(params) {
    /**
    * Function is called when grid is instantiated.
    * @param params Ag grid params
    */
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }

HTML 代码：

<ag-grid-angular class="ag-theme-alpine" [columnDefs]="columnDefs [gridOptions]="gridOptions" (gridReady)="onGridReady($event)"></ag-grid-angular>

Answer 2

经过几次尝试，我能够按照下面的代码实现我的目标，只需在外面调用 this.getRowStyle -

rowConditionalFormatting(rowColor, rowFormatData) {
   this.rowFormatData = rowFormatData;
   this.rowColor = rowColor;    
}

 this.getRowStyle = params => {
    for (let i = 0; i < this.rowFormatData.length; i++) {
        const columnHeader = this.rowFormatData[i].Name;
        const operator = this.rowFormatData[i].Operator;
        const cellValue = this.rowFormatData[i].Value;
        if (params.data[columnHeader] == cellValue) {
            return {background: this.rowColor };
        }
    }    
 }