Angular Material Table通用组件：绑定表格时如何检查嵌套空对象

嘿，我完全懂你在开发这款通用Angular Material Table组件时遇到的麻烦——当传入的行对象本身是null/undefined时，不知道怎么安全处理对吧？别担心，这里有几种实用的方式帮你搞定：

1. 在Cell渲染函数内部直接做Null检查 #

你的列配置里的cell函数是直接接收行对象的，那我们可以在函数最开头就加上null判断，避免后续访问属性时报错：

communicationColumns = [
  {
    columnDef: 'Icon',
    header: 'Due Date',
    cell: (row: CommunicationClaimantLinkDto) => {
      // 先判断行是否为null/undefined
      if (!row) {
        return '-'; // 可以换成你需要的默认占位符，比如空字符串、"N/A"
      }
      // 这里写原来的渲染逻辑，比如处理日期
      return row.dueDate ? row.dueDate.toLocaleDateString() : 'No Due Date';
    }
  },
  // 其他列配置...
];

2. 封装通用工具函数复用检查逻辑 #

如果多个列都需要做同样的null检查，写重复代码太麻烦，我们可以封装一个辅助函数：

// 辅助函数：处理null行，返回默认值或执行传入的有效行逻辑
const handleNullRow = <T>(
  row: T | null | undefined,
  fallbackValue: string,
  validRowHandler: (row: T) => string
): string => {
  if (!row) return fallbackValue;
  return validRowHandler(row);
};

// 在列配置中使用这个工具函数
communicationColumns = [
  {
    columnDef: 'Icon',
    header: 'Due Date',
    cell: (row: CommunicationClaimantLinkDto) => 
      handleNullRow(row, '-', (validRow) => 
        validRow.dueDate ? validRow.dueDate.toLocaleDateString() : 'No Due Date'
      )
  },
  // 其他列...
];

3. 在模板层面做全局Null检查 #

如果你希望在模板里统一处理所有列的null行，也可以在mat-cell的渲染逻辑里加判断：

<ng-container [matColumnDef]="col.columnDef" *ngFor="let col of communicationColumns">
  <th mat-header-cell *matHeaderCellDef>{{ col.header }}</th>
  <td mat-cell *matCellDef="let row">
    <!-- 先检查行是否为null，再调用cell函数 -->
    {{ row ? col.cell(row) : 'N/A' }}
  </td>
</ng-container>

4. 从数据源层面过滤Null行 #

如果你的数据集里本身就可能存在null的行，还可以在组件初始化数据源时直接过滤掉：

// 假设rawData是你传入的原始数据集
this.dataSource = new MatTableDataSource(
  this.rawData.filter(item => item !== null && item !== undefined)
);

这种方式能从源头减少null行的出现，不过前面的检查逻辑依然建议保留，作为防御性编程的一部分，避免意外情况。

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