web-dev-qa-db-fra.com

Angular Material v6 Mat-Footer - "Impossible de lire la propriété 'template' d'undefined"

J'essaie d'implémenter une ligne de pied de page dans un composant mat-table après avoir récemment mis à niveau vers angular 6 à cet effet, mais après avoir ajouté à la fois la cellule mat-footer-cell et la table mat-footer-row éléments du tableau, j'obtiens l'erreur suivante:

ERREUR TypeError: impossible de lire la propriété 'modèle' d'undefined sur MatFooterRowDef.Push ../ node_modules/@angular/cdk/esm5/table.es5.js.CdkFooterRowDef.extractCellTemplate (vendor.js: 17400)

Le tableau apparaît toujours sur la page, mais sans données, sans ligne de pied de page et avec un symbole T à droite de chaque en-tête de colonne.

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

CORRIGÉ: cela n'était pas précisé dans la documentation du matériau, mais les colonnes toutes doivent contenir un <mat-footer-cell/> élément, même si une seule colonne contiendra du contenu.

37
nick.cook

Vous pouvez définir votre propre variable "tableFooterColumns".

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

et utilisez-le dans le modèle (changez "colspan" selon vos besoins):

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