带有不规则表头的 CDK 表/材料表：如何获得两层表头？

Question

我是 Angular 的新手，我想知道是否有可能使用 CDK 表/材料表来创建一个带有类似于此处描述的不规则标题的多层表：https://www.w3.org/WAI/tutorials/tables/irregular/

例如，我的数据由 5 列组成：

• 姓名（例如“棕色头发的人”）
• 男性（例如 1）
• 女性（例如 2 个）
• 男性（例如 3）
• 女性（例如 4 个）

标题的位置：

• 谁
• 男
• 女性
• 男
• 女性

现在交易来了，我有 2 次男性和女性的原因是我想将它们分组为“18 岁”。理想情况下，它看起来像上述网站上的示例 1。

如果这是不可能的，实现它的最佳组件是什么，或者我应该将 ngFor 与普通 html 表结合使用？

Answer 1

您可以在具有材质类的表格之前添加一个元素：

<div class="mat-header-row">
  <div class="mat-header-cell"> empty (column 1) </div>
  <div class="mat-header-cell"> columns 2-3 </div>
  <div class="mat-header-cell"> columns 4-5 </div>
</div>

<mat-table>...