将页脚添加到 mat 数据表

Question

我想在我的角度材料数据表中添加一个页脚。当我运行代码时，表上没有显示任何数据。当我取出页脚时，数据显示。

下面是我的代码。

<div class="mat-elevation-z8">
    <mat-table [dataSource]="listData">
        <ng-container matColumnDef="fullName">
            <mat-header-cell *matHeaderCellDef>Full Name</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.fullName}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef>Email</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="mobile">
            <mat-header-cell *matHeaderCellDef>Mobile</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.mobile}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="city">
            <mat-header-cell *matHeaderCellDef>City</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.city}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-icon-button><mat-icon>launch</mat-icon></button>
                <button mat-icon-button color="warn"><mat-icon>delete_outline</mat-icon></button>
            </mat-cell>
        </ng-container>
        <ng-container matColumnDef="loading">
            <mat-footer-cell *matfooterCellDef colspan="6">
                loading data...
            </mat-footer-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        <mat-footer-row *matFooterRowDef="['loading']"></mat-footer-row>
    </mat-table>
</div>

控制台显示以下错误信息。

core.js:4442 ERROR TypeError: Cannot read property 'template' of undefined
    at MatFooterRowDef.extractCellTemplate (table.js:472)
    at table.js:1873
    at Function.from (<anonymous>)
    at MatTable._getCellTemplates (table.js:1868)
    at MatTable._renderCellTemplateForItem (table.js:1833)
    at MatTable._renderRow (table.js:1829)
    at table.js:1762
    at Array.forEach (<anonymous>)
    at MatTable._forceRenderFooterRows (table.js:1762)

我不确定是什么问题。我实际上正在学习一个有效的教程，但它对我不起作用。

请帮助解决问题。