web-dev-qa-db-ja.com

Angular Material v6 Mat-Footer-"未定義のプロパティ 'template'を読み取れません"

この目的のために最近angular 6にアップグレードした後、mat-footer-cellとmat-footer-rowの両方を追加した後、フッター行をマットテーブルコンポーネントに実装しようとしています。テーブルの要素、次のエラーが表示されます。

エラーTypeError：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>
angularangular-materialangular6
6
nick.cook

修正済み：これは材料のドキュメントでは明確にされていませんでしたが、1列のみがコンテンツを含む場合でも、all列には<mat-footer-cell/>要素が含まれている必要があります。

37
nick.cook

独自の「tableFooterColumns」変数を定義できます。

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

テンプレートで使用します（必要に応じて「colspan」を変更します）：

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