将 Colspan 添加到 mat-table 标题答案

【问题标题】：Adding Colspan to mat-table header将 Colspan 添加到 mat-table 标题
【发布时间】：2021-11-25 13:06:32
【问题描述】：

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

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

我找不到任何其他将一个 mat-header-cell 与多个 mat-cell 一起使用的示例

所需输出：

【问题讨论】：

标签： angular angular-material mat-table

【解决方案1】：

您不必为列和标题列使用相同的数组。使用两个不同的数组:)

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。

【讨论】：

您的 stackblitz 中有类型错误 - 您在 ts 中使用“displazedHeaderColumns”并且应该是“displayedHeaderColumns”（请参阅“z”应该是“y”）
谢谢，我已经修好了。