Angular Material v6 Mat-Footer - "Не удается прочитать свойство 'template' из неопределенного"

Question

Я пытаюсь внедрить строку нижнего колонтитула в компонент таблицы mat после недавнего обновления до углового 6 для этой цели, но после добавления в таблицу элементов mat-footer-cell и mat-footer-row, яполучить следующую ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'template' неопределенного в MatFooterRowDef.push ../ node_modules/@angular/cdk/esm5/table.es5.js.CdkFooterRowDef.extractCellTemplate(vendor.js: 17400)

Таблица по-прежнему отображается на странице, но без данных, без строки нижнего колонтитула и символа T справа от заголовка каждого столбца.

HTML:

  <ng-container matColumnDef="total">

    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 15%; flex: none">Total</mat-header-cell>

    <mat-cell *matCellDef="let item" style="width: 15%; flex: none">{{item.total | currency: 'GBP'}}</mat-cell>

    <td mat-footer-cell *matFooterCellDef>100</td>

  </ng-container>

  <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>

  <mat-row *matRowDef="let row; columns: tableColumns" (click)="editItem(row)"></mat-row>

  <tr mat-footer-row *matFooterRowDef="tableColumns"></tr>

</mat-table>

Answer 1

Вы можете определить свою собственную переменную "tableFooterColumns".

tableFooterColumns: string[] = ['total'];

и использовать ее в шаблоне (измените "colspan" для своих нужд):

 <tr mat-footer-row *matFooterRowDef="tableFooterColumns" colspan="2"></tr>

Answer 2

ИСПРАВЛЕНО: Это не было ясно указано в документации к материалу, но все столбцы должны содержать элемент <mat-footer-cell/>, даже если только один столбец будет содержать содержимое.