angular - 多个 mat-h​​eader-rows 不适用于 5.x 版角材料

Question

我试图有多个标题，如 https://stackblitz.com/edit/angular-bklajw-aazxkz?file=app%2Ftable-basic-example.html中所示

材料版本：“@angular/material”：“5.2.x”

我无法达到同样的效果，因为只有一个标题（第一个）被渲染。请帮我解决一下这个。我想在不升级我的版本的情况下达到同样的效果。如果我在这里有其他选择，请告诉我。

我的代码：

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

    <!--- Note mat-header-cellat mat-header-cellese columns can be defined in any order.
          The actual rendered columns are set as a property on mat-header-celle row definition" -->
  
    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>
  
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>
  
    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>
  
    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>
  
    <!-- Header row first group -->
    <ng-container matColumnDef="header-row-1">
      <mat-header-cell *matHeaderCellDef style="text-align: center;" [attr.colspan]="2">
        first group
      </mat-header-cell>
    </ng-container>
  
    <!-- Header row second group -->
    <ng-container matColumnDef="header-row-2">
      <mat-header-cell *matHeaderCellDef [attr.colspan]="2"> Second group </mat-header-cell>
    </ng-container>
    
    <mat-header-row *matHeaderRowDef="['header-row-1', 'header-row-2']"></mat-header-row>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

即使，我有多个 mat-h​​eader-row，只有第一个被渲染。