Issue
I am working with angular material matTable and I always get this type of error in the console:
Cannot read properties of undefined (reading 'template')
at MatHeaderRowDef.extractCellTemplate
This my code:
<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
<ng-container matColumnDef="numero">
<mat-header-row *matHeaderRowDef="displayedColumns">
<mat-header-cell title="Numero" *matHeaderCellDef mat-sort-header> Numero</mat-header-cell>
</mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
<mat-cell *matCellDef="let item">{{item.numero}}</mat-cell>
</mat-row>
</ng-container>
<ng-container matColumnDef="amount">
<mat-header-row *matHeaderRowDef="displayedColumns">
<mat-header-cell *matHeaderCellDef mat-sort-header> Amount</mat-header-cell>
</mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
<mat-cell *matCellDef="let item"> {{item.amount}} </mat-cell>
</mat-row>
</ng-container>
</table>
Solution
As far as I know, mat-header-row and mat-row are placed as an immediate child element of the table element, you can try the below code
<table mat-table [dataSource]="dataSource" multiTemplateDataRows="true" matSort>
<ng-container matColumnDef="numero">
<mat-header-cell title="numero" *matHeaderCellDef mat-sort-header> numero</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.numero}}</mat-cell>
</ng-container>
<ng-container matColumnDef="amount">
<mat-header-cell *matHeaderCellDef mat-sort-header> amount</mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.amount}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-row *matRowDef="let row; columns: ['numero'];"></mat-row>
<mat-row *matRowDef="let row; columns: ['amount'];"></mat-row>
</table>
Answered By - Mr. Stash
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.