Angular中如何基于父对象属性为AG-Grid单元格应用自定义CSS类

我之前也踩过这个坑，你现在的问题核心是对AG-Grid cellClassRules的表达式上下文理解不到位——当用字符串表达式时，默认只能拿到当前field对应的单个值（也就是这里的mon.hoursWorked），而不是整行的数据源对象，所以直接写mon.status会找不到对应的属性，另外你之前的写法里引号还没闭合，这也是导致不生效的原因之一。

这里给你两种靠谱的解决方案：

方案1：用函数形式的cellClassRules（适合复杂逻辑） #

函数形式能拿到完整的params参数，其中params.data就是整行的数据源对象，你可以自由访问任何嵌套属性：

this.columnDefs = [
  { headerName: 'Project', field: 'projectName' },
  { 
    headerName: 'MON ', 
    field: 'mon.hoursWorked', 
    cellClassRules: {
      'text-danger': (params) => {
        // 通过params.data获取整行数据，直接访问同级的status属性
        return params.data.mon.status === 'Submitted';
      }
    } 
  }
];

方案2：用字符串表达式（适合简单判断） #

如果还是想用字符串表达式，要通过data关键字来访问整行数据源，同时注意引号的正确配对：

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

这两种方式都能帮你基于mon.status的取值，为mon.hoursWorked的单元格设置样式，根据你的实际逻辑复杂度选就行～

内容的提问来源于stack exchange，提问作者Danish