Angular 4 добавление нижнего колонтитула в таблицу данных Mat

Question

<mat-table>
    <ng-container matColumnDef="ytdBurnt">
        <mat-header-cell *matHeaderCellDef style="font-size: 65%" class="white-text" fxHide [fxShow.gt-md]="true"> Ytd Burnt </mat-header-cell>
        <mat-cell *matCellDef="let element" style="font-size: 65%"> <span> {{ element.ytdBurnt }}</span> </mat-cell>
    </ng-container>
    <!-- column based filter -->
    <ng-container *matHeaderRowDef="displayedColumns">
        <mat-header-row class="blue-back"></mat-header-row>
    </ng-container>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSize]="25" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

Я хочу добавить нижний колонтитул в приведенную выше таблицу матов.Я пытался добавить <td mat-footer-cell *matFooterCellDef> Total </td> вместе с

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

Но это не работает.

Answer 1

Добавить компонент ячейки нижнего колонтитула в каждую ячейку

<ng-container matColumnDef="item">
    <mat-header-cell *matHeaderCellDef style="font-size: 65%" > Ytd Burnt </mat-header-cell>
    <mat-cell *matCellDef="let element" style="font-size: 65%"> <span> {{ element.item }}</span> 
    </mat-cell>
    <mat-footer-cell *matFooterCellDef> Total </mat-footer-cell>
</ng-container>

и перед закрытием мат-таблицы добавьте

 ...
 <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>