如何在TypeScript的matTable中将不同属性合并至同一列？

完全可以实现，你只需要调整列配置和单元格的渲染逻辑：

1. 修改列配置 #

把原来的两个Dog、Cat列替换成一个Animals列，不需要指定单个属性key，而是自定义列的显示逻辑：

configureColumns() {
  this.columns = [
    {
      key: "Animals", // 自定义列key
      display: "Animals",
      styles: { flex: "0 0 15%" } // 可根据内容调整宽度
    },
    // 其他列...
  ];
}

2. 自定义单元格渲染 #

在mat-table的模板里，针对Animals列手动拼接两个属性的值：
如果是直接使用mat-cell模板：

<ng-container matColumnDef="Animals">
  <th mat-header-cell *matHeaderCellDef> Animals </th>
  <td mat-cell *matCellDef="let element"> {{ element.Dog }}, {{ element.Cat }} </td>
</ng-container>

如果你的列是动态生成的，可以在获取单元格内容的方法里处理：

// 假设存在获取单元格值的方法
getCellValue(element: any, column: any): string {
  if (column.key === "Animals") {
    return `${element.Dog}, ${element.Cat}`;
  }
  // 其他列的默认取值逻辑
  return element[column.key];
}

3. 可选：处理空值情况 #

如果Dog或Cat可能为空，可以添加判断避免出现多余逗号：

<td mat-cell *matCellDef="let element">
  {{ [element.Dog, element.Cat].filter(Boolean).join(', ') }}
</td>

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