angular - Angular Material 表中的动态标题内容？

Question

我正在尝试向我的 Angular Material 表添加动态标题，但我不知道该怎么做。在这种情况下，我希望月份位于标题中。

<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"但它不起作用。我不断收到错误:

类型错误:无法读取未定义的属性“月份”

有什么想法吗？

Answer 1

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

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

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

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

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

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

如果月份值位于数组中或与表位于同一数据源中，则需要添加一些过滤逻辑来提取月份值。