使用 Angular 材质表对列进行分组答案

【问题标题】：Use Angular material table to group columns使用 Angular 材质表对列进行分组
【发布时间】：2019-04-18 00:37:45
【问题描述】：

我试图弄清楚如何使用 Angular mat-table 对列进行分组。我不知道如何从这个开始，我似乎无法在任何地方找到一个例子。前两个部分需要像下图这样分组：

【问题讨论】：

【解决方案1】：

您可以在列组中添加<tr>，并使用[attr.colspan] 指定要包含的列数。下面的示例有 4 列。

    <!-- Header row first group -->
  <ng-container matColumnDef="header-row-first-group">
    <th mat-header-cell *matHeaderCellDef 
        [style.text-align]="center"
        [attr.colspan]="1"> 
      First group 
    </th>
  </ng-container>

  <!-- Header row second group -->
  <ng-container matColumnDef="header-row-second-group">
    <th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Second group </th>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']"></tr>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

我在这个Github issue 的线程中找到了解决方案。

有关完整的工作示例，请参阅此Stackblitz。

【讨论】：

这是一个很好的解决方案。也适用于粘性列。