在最近为此目的升级到 angular 6 之后,我正在尝试将页脚行实现到 mat-table 组件中,但是在表中添加了 mat-footer-cell 和 mat-footer-row 元素之后,我得到以下错误:
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 符号。
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>
最佳答案
已修复:这在 Material 文档中没有明确说明,但所有 列必须包含 <mat-footer-cell/>
元素,即使只有一列将包含内容。
关于Angular Material v6 Mat-Footer - "Cannot read property ' template' of undefined",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50641359/