如何为ng2-smart-table的指定列<td>添加CSS类？

不推荐你当前的实现方式 #

你直接通过多层DOM节点定位的写法非常脆弱，只要组件渲染结构（比如ng2-smart-table的内部DOM层级）发生变化，代码就会失效，而且可读性极差，后续维护困难。

推荐实现方案 #

方案1：利用官方内置的cellClass配置

这是最简洁且符合框架设计的方式，直接在列配置中设置cellClass属性，支持固定类名或动态判断：

// 你的组件中的settings配置
settings = {
  columns: {
    // 替换成你目标列的字段名，比如payerName
    payerName: {
      title: '付款方名称',
      // 固定添加类名
      // cellClass: 'payer-desc-resident-shown',
      // 动态判断添加（根据行数据）
      cellClass: (row: any) => {
        // 示例：根据行数据的某个字段判断是否添加类
        return row.isResident ? 'payer-desc-resident-shown' : '';
      }
    }
  }
};

cellClass可以是字符串（固定类），也可以是接收当前行数据的函数，返回需要添加的类名字符串。

方案2：自定义列组件控制

如果需要更复杂的逻辑（比如结合组件内部状态），可以自定义列组件，然后操作对应的<td>元素：

1. 配置列使用自定义组件：

settings = {
  columns: {
    payerName: {
      title: '付款方名称',
      component: NgxPayerNameColumnComponent // 你的自定义组件
    }
  }
};

2. 在自定义组件中通过Renderer2获取父级<td>并添加类：

import { Component, Input, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
import { Cell } from 'ng2-smart-table';

@Component({
  selector: 'ngx-payer-name-column',
  template: `{{ cell.getValue() }}`
})
export class NgxPayerNameColumnComponent implements AfterViewInit {
  @Input() cell: Cell;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit() {
    // 找到当前组件所在的<td>元素
    const tdElement = this.el.nativeElement.closest('td');
    this.renderer.addClass(tdElement, 'payer-desc-resident-shown');
    
    // 也可以结合行数据动态判断
    // if (this.cell.row.data.isResident) {
    //   this.renderer.addClass(tdElement, 'payer-desc-resident-shown');
    // }
  }
}

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