Angular Material 5.2.x 多个mat-header-row仅渲染首个表头问题求助

@angular/material 5.2.x 版本的MatTable组件尚未原生支持多组mat-header-row的并行渲染，默认仅识别模板中第一个定义的header row作为唯一表头进行渲染，后续配置的所有header row都会被组件内置渲染逻辑直接忽略，这就是最终仅第一行表头显示的核心原因。
该多表头原生能力是@angular/material 6.x版本才正式发布的功能，在不升级依赖的前提下，无需强行适配原生多header row逻辑，可通过以下替代方案实现预期效果。

方案1：自定义静态表头 + 隐藏MatTable内置表头（优先推荐，稳定性最高） #

该方案完全绕开MatTable对多header row的原生限制，保留MatTable对表体数据渲染的全部能力，无侵入性改动：

• 开启MatTable的内置表头隐藏开关，传入[hideHeader]="true"属性，让组件不再自动渲染内置的默认表头
• 在<mat-table>元素的上方，手写符合表格结构的多级静态表头HTML，模拟和原生表头一致的样式
• 配置统一的列宽规则，保证自定义表头和下方表体的列完全对齐

对应的修改后模板示例代码：

<!-- 自定义多级表头区域 -->
<table class="custom-multi-header mat-elevation-z8">
  <!-- 第一级：分组表头行 -->
  <tr class="mat-header-row">
    <th class="mat-header-cell" colspan="2" style="text-align: center;">first group</th>
    <th class="mat-header-cell" colspan="2">Second group</th>
  </tr>
  <!-- 第二级：具体列名行 -->
  <tr class="mat-header-row">
    <th class="mat-header-cell">No.</th>
    <th class="mat-header-cell">Name</th>
    <th class="mat-header-cell">Weight</th>
    <th class="mat-header-cell">Symbol</th>
  </tr>
</table>

<!-- mat-table 仅保留表体渲染能力，隐藏内置表头 -->
<mat-table 
  [dataSource]="dataSource" 
  [hideHeader]="true"
  class="mat-elevation-z8"
>
  <!-- 保留原有所有表体列定义，无需改动 -->
  <ng-container matColumnDef="position">
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="name">
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="weight">
    <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="symbol">
    <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
  </ng-container>

  <!-- 保留原有表体行渲染逻辑 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

配套的对齐样式，保证自定义表头和表体无错位、无样式断层：

.custom-multi-header {
  width: 100%;
  margin-bottom: -1px; /* 消除和下方表体的缝隙 */
}
.custom-multi-header th {
  /* 完全对齐mat-header-cell的原生样式 */
  text-align: left;
  font-weight: 500;
  padding: 0 16px;
  box-sizing: border-box;
}
mat-table {
  margin-top: 0;
}

方案2：手动注入custom header row到MatTable内部渲染容器（侵入性较强，谨慎使用） #

如果需要保留MatTable对表头交互（比如排序、sticky表头）的原生能力，可以在组件的ngAfterViewInit生命周期钩子里，通过ViewChild获取MatTable实例，找到组件内部预留的表头渲染DOM容器，将自定义的多组header row元素手动插入到容器中。

风险提示：该方案直接操作MatTable的非公开内部DOM结构，没有官方API保障，即便后续打小版本补丁都可能出现兼容问题，仅当方案1无法满足交互需求时再考虑使用。

原代码的配置逻辑纠错 #

即便在支持多header row的高版本中，原本的header row配置写法也存在逻辑错误：每个mat-header-row的*matHeaderRowDef对应的值是当前行需要渲染的所有列的key数组，将两个跨列分组的列名写在同一个header row的配置中，会导致单行同时渲染两个分组单元格，完全不符合多级表头的结构预期。

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