Angular 8中Mat-Table实现两行表头的问题求助

要在Angular 8的Mat-Table中实现两行表头，你不需要纠结于displayedColumns的多组配置——因为*matHeaderRowDef本身是基于单个列数组生成一行表头，多组数组容易导致列对齐问题。这里有两种可靠的解决方案，根据你的需求选择：

方案1：跨列分组的两行表头（适合分类展示） #

这种方案适合将相关列分组，第一行显示分组标题，第二行显示具体列名。核心思路是手动添加额外的表头行，通过colspan属性合并对应列，同时保留原有的displayedColumns生成第二行表头，保证数据列对齐。

修改后的HTML代码 #

<div class="container">
  <div class="mat-elevation-z8">
    <table #dataTable mat-table [dataSource]="dataSource">
      <!-- 原有列定义保持不变 -->
      <ng-container class="ng-hide" matColumnDef="$key">
        <th class="ng-hide" mat-header-cell *matHeaderCellDef>ID del Paciente</th>
        <td class="ng-hide" mat-cell *matCellDef="let element"> {{element.$key}} </td>
      </ng-container>
      <ng-container matColumnDef="nombre_paciente">
        <th mat-header-cell *matHeaderCellDef> Nombre </th>
        <td mat-cell *matCellDef="let element"> {{element.nombre_paciente}}</td>
      </ng-container>
      <ng-container matColumnDef="apellido_paciente">
        <th mat-header-cell *matHeaderCellDef> Apellido </th>
        <td mat-cell *matCellDef="let element"> {{element.apellido_paciente}} </td>
      </ng-container>
      <ng-container matColumnDef="dni">
        <th mat-header-cell *matHeaderCellDef> DNI </th>
        <td mat-cell *matCellDef="let element"> {{element.dni}} </td>
      </ng-container>
      <ng-container matColumnDef="fecha_nacimiento">
        <th mat-header-cell *matHeaderCellDef> Fecha de Nacimiento </th>
        <td mat-cell *matCellDef="let element"> {{element.fecha_nacimiento | date: "dd/MM/yyyy" }}</td>
      </ng-container>
      <ng-container matColumnDef="obra_social">
        <th mat-header-cell *matHeaderCellDef> Obra Social </th>
        <td mat-cell *matCellDef="let element"> {{element.obra_social}} </td>
      </ng-container>
      <ng-container matColumnDef="numero_os">
        <th mat-header-cell *matHeaderCellDef> Número de Obra Social </th>
        <td mat-cell *matCellDef="let element"> {{element.numero_os}} </td>
      </ng-container>
      <ng-container matColumnDef="telefono">
        <th mat-header-cell *matHeaderCellDef> Número de teléfono </th>
        <td mat-cell *matCellDef="let element"> {{element.telefono}} </td>
      </ng-container>
      <ng-container matColumnDef="telefono_contacto">
        <th mat-header-cell *matHeaderCellDef> Teléfono de Contacto </th>
        <td mat-cell *matCellDef="let element"> {{element.telefono_contacto}} </td>
      </ng-container>
      <ng-container matColumnDef="accion">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element; let i = index;">
          <button mat-raised-button color="primary" class="push-right" [routerLink]="['/PacienteEdita/', element.$key]">Editar</button>
          <button mat-raised-button color="warn" (click)="deletePaciente(i, element)">Eliminar</button>
        </td>
      </ng-container>

      <!-- 第一行表头：分组标题行 -->
      <tr mat-header-row>
        <th mat-header-cell colspan="1" class="ng-hide">ID del Paciente</th>
        <th mat-header-cell colspan="2">Nombre Completo</th>
        <th mat-header-cell colspan="1">DNI</th>
        <th mat-header-cell colspan="1">Fecha de Nacimiento</th>
        <th mat-header-cell colspan="2">Obra Social</th>
        <th mat-header-cell colspan="2">Datos de Contacto</th>
        <th mat-header-cell colspan="1">Acciones</th>
      </tr>

      <!-- 第二行表头：具体列名行（使用原有displayedColumns） -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

      <!-- 数据行保持不变 -->
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</div>

样式调整（可选） #

添加CSS让表头行高度自适应，内容居中：

.mat-header-row {
  height: auto;
}

.mat-header-cell {
  vertical-align: middle;
  text-align: center;
}

.ng-hide {
  display: none !important;
}

方案2：单列两行表头（适合每个列有多层说明） #

如果不需要跨列分组，只是每个列的表头需要两行文字（比如主标题+副标题），直接修改每个mat-header-cell的内容即可，无需调整表头行结构。

修改示例（以nombre_paciente列为例） #

<ng-container matColumnDef="nombre_paciente">
  <th mat-header-cell *matHeaderCellDef>
    <div>Nombre</div>
    <div style="font-size: 0.8em; color: #666;">(Primer Nombre)</div>
  </th>
  <td mat-cell *matCellDef="let element"> {{element.nombre_paciente}}</td>
</ng-container>

对其他列做同样的修改后，整个表头就会呈现两行效果，每个列的表头包含两行文字。

为什么之前的方法没成功？ #

Mat-Table的*matHeaderRowDef指令是基于单个displayedColumns数组生成一行表头，如果你尝试用两组不同的displayedColumns生成两行，会导致列的数量或顺序不匹配，进而出现数据列与表头对齐混乱的问题。而上面两种方案要么手动对齐列的位置，要么复用原有displayedColumns，完美解决了对齐问题。

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