Содержимое динамического заголовка в таблице угловых материалов?

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", но он не работает.Я получаю сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'month' из неопределенного

Есть идеи?

Answer 1

Вы не можете определить переменную как *matHeaderCellDef="let element", потому что текст заголовка не должен быть undefined при инициализации таблицы.

Необходимо убедиться, что таблица не инициализирована, пока не получите значение месяца,

например, используйте *ngIf="data", чтобы таблица не инициализировалась до тех пор, пока в источнике таблицы не появятся значения.

Предполагается, что значение месяца загружается через HTTP и сохраняется в retrievedMonth,

Вы можете заполнить заголовок динамически следующим образом:

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

Если значение месяца находится в массиве или в том же источнике данных, что и таблица, вам нужно поместить некоторую логику фильтрации визвлечь значение месяца.