Angular Material v6 Mat-Footer - “无法读取未定义的属性‘模板’" [英] Angular Material v6 Mat-Footer - "Cannot read property 'template' of undefined"

问题描述

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

I'm trying to implement a footer row into a mat-table component after recently upgrading to angular 6 for this purpose, but after adding both the mat-footer-cell and mat-footer-row elements in the table, I get the following error:

错误类型错误:无法读取未定义的属性模板"在 MatFooterRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkFooterRowDef.extractCellTemplate (vendor.js:17400)

ERROR TypeError: Cannot read property 'template' of undefined at MatFooterRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkFooterRowDef.extractCellTemplate (vendor.js:17400)

表格仍然出现在页面上，但没有数据，没有页脚行，并且每列标题右侧有一个 T 符号.

The table still appears on the page, but with no data, no footer row, and a T symbol where to the right of each column heading.

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>

推荐答案

FIXED: 这在材料文档中没有明确说明，但 所有 列必须包含 元素，即使只有一列将包含内容.

FIXED: This was not made clear in the material documentation, but all columns must contain a <mat-footer-cell/> element, even if only one column will contain content.

这篇关于Angular Material v6 Mat-Footer - “无法读取未定义的属性‘模板’"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！