如何在 angular 的 ag-grid 单元格中应用自定义 css class？

Question

根据我的逻辑，我无法在 angular 的 ag-grid 单元格中应用 css。我已将一个对象分配给网格。但是在那个字段上我分配了一个 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'}},
];

以上代码有效，文本危险 class 分配给单个单元格

//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-danger' 中需要帮助：'mon.status == `Submitted' 行它不是那样工作的

Answer 1

cellClassRules 函数采用包含行数据的 params 对象。

试试这个使用 params 对象的代码。

this.columnDefs = [
  { headerName: 'Project', field: 'projectName' },
  {
    headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: {
      'text-danger': params => params.data.mon.status == 'Submitted'
    }
  },
];

如何在 angular 的 ag-grid 单元格中应用自定义 css class？

How to apply custom css class in ag-grid cell in angular?

angular

ag-grid-angular