Angular 材料表中的动态标题内容？

Question

我试图在我的角度材料表中添加一个动态标题，但我不知道该怎么做。在这种情况下，我希望月份位于标题中。

<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>

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