角垫工作台，每组前都有额外的行

Question

我想使用Angular Material创建类似于此的上衣

我不知道如何在每组行之前添加其他标题行（蓝色的）。

这是我到目前为止所拥有的。

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<ng-container matColumnDef="env">
  <th mat-header-cell *matHeaderCellDef> Env </th>
  <td mat-cell *matCellDef="let element"> {{element.options.env}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

我的数据具有布局：

{ [{options: {env: abc}, sublist: {[host1, host2, hostn]}}, ..]}

Answer 1

这就是做到这一点的方式（真的还需要再输入4个字符吗？）https://stackblitz.com/edit/angular-mattable-with-groupheader?file=package.json