将 Colspan 添加到 mat-table header

Question

我想将 colspan 添加到 mat-table mat-header。

当前 Link：https://stackblitz.com/edit/angular-bklajw-mwqqvl?file=app/table-basic-example.html

我找不到任何其他示例，其中一个 mat-header-cell 与多个 mat-cell

一起使用

期望的输出：

Answer 1

您不必对列和 header 列使用相同的数组。使用两个不同的数组:)

displayedHeaderColumns: string[] = ['name', 'weight'];
displayedColumns: string[] = ['name', 'weight', 'symbol'];

现在在您的模板中，您可以使用 displayedHeaderColumns 作为 headerColumns

<ng-container matColumnDef="weight">
  <th mat-header-cell colspan="2" *matHeaderCellDef>Properties</th>
  <td mat-cell *matCellDef="let element">{{element.weight}}</td>
</ng-container>

<ng-container matColumnDef="symbol">
  <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
</ng-container>

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

注意 weight 列上的 colspan 属性。

这里可以看到运行 different header columns for a matTable example.

将 Colspan 添加到 mat-table header

Adding Colspan to mat-table header

angular-material

angular

mat-table