如何将Mat-table数据源所属对象的非数组数据添加至表格？

当然可以，有两种实用的实现思路：

思路一：把非数组字段转成数组元素，和原数据合并 #

直接在组件逻辑里将对象的非数组字段封装成一个新对象，和原similarPositions数组合并成新的数据源：

// 组件.ts文件中处理数据源
this.tableDataSource = [
  // 把基础信息封装成单独一行的数据
  {
    rowType: '基础信息',
    availableAmount: this.object.availableAmount,
    chosenAmount: this.object.chosenAmount,
    cost: this.object.cost,
    name: this.object.name
  },
  // 合并原有的相似职位数据
  ...this.object.similarPositions
];

然后模板里更新数据源绑定：

<mat-table [dataSource]="tableDataSource"></mat-table>

这种方式适合把基础信息作为表格的首行/末行展示，需要注意确保表格列定义能兼容两种数据结构，比如用*ngIf判断不同行类型的字段显示。

思路二：用附加区域展示非数组数据 #

如果不需要把基础信息作为表格行，而是想固定在表格的上方或下方，可以直接在表格外添加展示区域：

<!-- 表格上方展示基础信息 -->
<div class="table-top-info">
  <span>名称：{{object.name}}</span>
  <span>可用数量：{{object.availableAmount}}</span>
  <span>已选数量：{{object.chosenAmount}}</span>
  <span>成本：{{object.cost}}</span>
</div>

<mat-table [dataSource]="object.similarPositions"></mat-table>

也可以自定义mat-header-row，把这些基础信息嵌入表头，不过需要额外配置表头的结构和样式。

注意事项 #

• 如果是异步加载的对象数据，要确保数据加载完成后再处理数据源，避免出现undefined错误
• 用第一种思路时，若原similarPositions的对象结构和基础信息对象差异较大，可给表格列添加条件渲染逻辑

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