Angular Material的Mat Table组件是否支持绑定多个DataSource数据源？

核心结论 #

原生Angular Material提供的Mat Table组件不支持直接绑定第二个dataSource属性，你示例中<mat-table [dataSource]="dataSource", [dataSource2]="dataSource2">的写法无法生效，组件本身没有对外暴露dataSource2这类自定义数据源输入属性。

设计逻辑说明 #

Mat Table的底层设计就是基于单数据源实现行渲染、排序、过滤、分页等内置能力，单数据源的映射规则更清晰，每一行渲染对象默认直接对应数据源中的一条记录。

多数据源场景的实现方案 #

如果你确实需要用到两份数据来渲染表格，推荐使用以下两种常用方案：

• 方案一（优先推荐）：TS层合并数据源
  提前在组件逻辑层把两份数据源按关联字段（比如共同的ID）合并为一个完整的对象数组，再把合并后的数组赋值给dataSource即可。这种方案完美适配Mat Table的所有原生能力，不需要额外修改排序、过滤、分页的逻辑，性能最优。
  举个示例：如果dataSource存用户基础信息（带user_id、username、age字段），dataSource2存用户职位信息（带user_id、title字段），遍历匹配两个数组的user_id，合并为每条都包含四个字段的新数组即可直接作为表格数据源。
• 方案二（小数据量适用）：模板层直接匹配取值
  不需要修改数据源，直接在列定义中引入第二个数据源，通过关联字段查找对应值，示例写法如下：

  <!-- Title列从第二个数据源取值示例 -->
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{ dataSource2.find(item => item.user_id === row.user_id)?.title }} </mat-cell>
  </ng-container>
  

  注意这种方案仅适合小数据量场景，数据量过大会因为频繁查找出现性能问题。

额外提示 #

如果两份数据源是完全不相关的数据集，建议直接使用两个独立的Mat Table组件分别渲染，硬塞到同一个表格会导致数据逻辑混乱，也不符合组件的设计规范。

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