Как применить собственный класс css в ячейке ag-grid в angular?

Я не могу применить css в ячейке ag-grid в angular на основе моей логики. Я назначил объект сетке. Но в этом поле я назначил значение Object.hours, и мне нужно применить логику на основе свойства Object.status.

Используя официальную документацию, я могу применить css по текущему значению ячейки, как указано здесь https://www.ag-grid.com/javascript-grid-cell-styles/#cell-style-cell-class-cell-class-rules-params. Но мне нужно применить его на основе родительского Object.status

//Object i am using in ag-grid
this.timeSheet = {
 projectName: 'HRMS',
 mon: {
  hoursWorked: 6,
  status: 'Submitted'
 },
 tue: {
  hoursWorked: 6,
  status: 'Submitted'
 }
}

//Working code
this.columnDefs = [
  {headerName: 'Project', field: 'projectName'},
  {headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: {
     'text-danger': 'x == 6'}},
];

Приведенный выше код работает, и индивидуальной ячейке присвоен класс опасности текста

//I need it to work like that
this.columnDefs = [
   {headerName: 'Project', field: 'projectName'},
   {headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: {
     'text-danger': 'mon.status == `Submitted'}}, 
 ];

Нужна помощь в строке 'text-dangerous': 'mon.status == `Submitted', она не работает


angular ag-grid-angular
person Danish    schedule 19.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

cellClassRules функции принимают params объект, содержащий данные строки.

Попробуйте этот код, который использует объект params.

this.columnDefs = [
  { headerName: 'Project', field: 'projectName' },
  {
    headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: {
      'text-danger': params => params.data.mon.status == 'Submitted'
    }
  },
];
person abd995    schedule 19.01.2019
comment
Вызывается ли это при каждом onChange? Я хотел бы переключать классы каждый раз, когда значение ячейки изменяется и проверяется. - person StangSpree; 03.07.2020
comment
@StangSpree Да, должно. Подробнее читайте здесь - ag-grid.com/javascript -grid-cell-styles / # обновление-стилей - person abd995; 04.07.2020