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

时间:2018-06-01 10:24:29

标签: angular angular-material angular6

为了这个目的,我最近在升级到角度6之后尝试将一个页脚行实现到mat-table组件中,但是在表格中添加mat-footer-cell和mat-footer-row元素后,我得到以下错误:

  

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

3 个答案:

答案 0 :(得分:24)

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

答案 1 :(得分:2)

每列需要包含 mat-footer-cell

module HopacExample2

open System
open Hopac
open Hopac.Infixes

let get c = Ch.take c
let put c (x: 'a) = Ch.give c x

let cell x = 
    let c = Ch ()
    Job.start (put c x) >>-. c

run <| job {
    let! c = cell 1
    let print () = Job.start (get c >>- fun i -> printf "%i\n" i)
    let put i = Job.start (put c i)
    for i=2 to 6 do
        do! print()
        do! put i
    }

Console.ReadKey()

答案 2 :(得分:0)

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

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

并在模板中使用它(根据需要更改“ colspan”):

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