Angular Material v6 Mat-Footer - “无法读取未定义的属性‘模板’”答案

【问题标题】：Angular Material v6 Mat-Footer - "Cannot read property 'template' of undefined"Angular Material v6 Mat-Footer - “无法读取未定义的属性‘模板’”
【发布时间】：2018-06-01 10:24:28
【问题描述】：

在最近为此目的升级到 angular 6 之后，我正在尝试将页脚行实现到 mat-table 组件中，但是在表中添加了 mat-footer-cell 和 mat-footer-row 元素之后，我得到以下错误：

错误类型错误：无法读取未定义的属性“模板” 在 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>

【问题讨论】：

如果没有mat-footer-row，表格是否正常显示？
是的，在我添加页脚元素之前没有问题
您是否能够在堆栈闪电战中重现此错误？ stackblitz.com/angular/klengxeqvdd
Amazing @MichaelDoye 你的例子是我的解决方案。

标签： angular angular-material angular6

【解决方案1】：

已修复：材料文档中没有明确说明，但所有列必须包含 <mat-footer-cell/> 元素，即使只有一列包含内容。

【讨论】：

绝对正确。如果要显示页脚内容，则每列必须包含 footer 单元格。我以另一种方式实现了这一点：<td mat-footer-cell *matFooterCellDef></td>.
或者，您还可以限制在页脚中显示的列。 <tr mat-footer-row *matFooterRowDef="['total']"></tr>。这在您必须使用 colspan 的情况下很有用。
是的。甚至为复选框定义的列也需要这样做。

【解决方案2】：

您可以定义自己的“tableFooterColumns”变量。

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

并在模板中使用它（根据需要更改“colspan”）：

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

【讨论】：

【解决方案3】：

每列需要包含 mat-footer-cell：

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

    <ng-container matColumnDef="categoryName">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.firstName}} </mat-cell>
      
      //This is the part for which the code is breaking
      <mat-footer-cell *matFooterCellDef> Your footer column Name will goes here </mat-footer-cell>**
    </ng-container>
    <ng-container matColumnDef="categoryName">
      <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.lastName}} </mat-cell>
      
      //This need to be included in all your columns
      <mat-footer-cell *matFooterCellDef> Your 2nd footer column Name will goes here </mat-footer-cell>**
    </ng-container>
    <mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></mat-footer-row>
  </mat-table>
</div>

【讨论】：