Как я могу установить столбец цвета фона на основе значения в сетке AG Angular

Question

У меня проблема с возможностью установить цвет фона строки на основе значения в этой строке. В моем случае это называется updateFlag, и если значение для этой строки равно true, я хочу установить для фона строки нечто иное, чем белый по умолчанию. Мне немного сложнее понять, что мы используем ag grid в очень модульном подходе. У меня есть ag-grid-base.component, который выполняет базовую c настройку каждой сетки через @inputs и имеет несколько @outputs, например onRowClickAction et c. затем компонент, который действительно хочет использовать сетку, реализует компонент ag-grid-base.component. В компоненте у меня есть функция, которая загружает определения столбцов из серверной части, а затем добавляет столбец Action с иконками.

createColumnDefs(columnsList: IGridColumnAgGrid[] = this.columnsList) {

        this.supplementaryColumnDefs = [
            {
                headerName: 'Actions',
                width: 70,
                sortable: false,
                suppressMenu: true,
                cellRendererFramework: ActionsRendererComponent,
                pinned: 'right',
            },
        ];
    }

Итак, что я ищу, так это где и как мне указать цвет фона строки, основанной на значении данной строки, как в моем случае updateFlag = true

Answer 1

Существует опция сетки в виде функции с именем getRowStyle, которая выглядит следующим образом:

в HTML:

<ag-grid-angular
[gridOptions]="gridOptions"
....></ag-grid-angular>

in .ts:

import { 
  GridOptions,
} from '@ag-grid-enterprise/all-modules';

и внутри класса:

gridOptions: GridOptions;

в конструкторе:

constructor(){
  this.gridOptions = {

    getRowStyle: (params: any) => {
      if (params.data){
        if(params.data.flag) {
          return { background: '#eee', 'font-weight': 750 };
        }
      }
    }
  }// end of gridoptions
}// end of constructor

Это применяется стиль что вы возвращаете в качестве ответа getRowStyle function

Я всегда использую этот метод в нашем проекте, например:

If total ('Toplam') значение строки в каждом столбце не сопоставляются с итогами другой таблицы, тогда цвет фона итоговой строки меняется на на красный.