Angular 材质表中的动态标题内容？答案

【问题标题】：Dynamic header content in Angular Material Table?Angular 材质表中的动态标题内容？
【发布时间】：2019-03-02 20:21:18
【问题描述】：

我正在尝试将动态标题添加到我的角度材料表中，但我不知道该怎么做。在这种情况下，我希望月份出现在标题中。

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

我也试过 *matHeaderCellDef="let element" 但它不起作用。我不断收到错误：

TypeError: 无法读取未定义的属性“月”

有什么想法吗？

【问题讨论】：

我能提供的唯一解决方案 - 每次需要更改标题标题时都可以重新构建表（只需重新分配 dataSource 对象
你找到解决办法了吗？
不抱歉，我不得不采用不同的解决方案，而不是使用 Material Table

标签： angular angular-material

【解决方案1】：

你不能定义像*matHeaderCellDef="let element"这样的变量，因为表初始化时标题文本不能是undefined。

您需要确保在获得月份值之前不会初始化表。

例如使用*ngIf="data" 以便在表源有值之前不会初始化表。

假设月份值通过HTTP加载并存储在retrievedMonth中，

您可以像这样动态填充标题：

<th mat-header-cell *matHeaderCellDef> {{retrievedMonth}} </th>

如果月份值在数组中或者与表在同一个数据源中，则需要放一些过滤逻辑来提取月份值。

【讨论】：