Reputation: 7401
I have a table designed with angular material. All the required markup is present in this table yet each time i run the app it throws
ERROR TypeError: Cannot read property 'template' of undefined
I've checked and double checked it if all the MatHeaderCellDefs are there, i checked whether the datasource was somehow undefined after ngOnInit, which isn't the case. I checked whether i made a typo somewhere, not the case either. I know this should be super simple but i've been literally trying to resolve this error for the past one and a half hour now and still no luck. Could someone please look at my code and see if i've missed something? Again, its not the datasource thats null. Everything gets retrieved correctly during the GET request.
Heres the HTML.
<table mat-table [dataSource] ="produceNameList" class="mat-elevation-z8">
<ng-container matColumnDef="produceName">
<th mat-header-cell *matHeaderCelDef>Produce name</th>
<td mat-cell *matCellDef="let produce">{{produce.produceName}}</td>
<td mat-footer-cell *matFooterCellDef> Average </td>
</ng-container>
<ng-container matColumnDef="produceCount">
<th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let produce"> {{produce.produceCount}} </td>
<td mat-footer-cell *matFooterCellDef> {{getAverage()}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>
Heres the ts
produceNameList: MatTableDataSource<ProduceMap> = null;
displayedColumns = ['produceName', 'produceCount'];
produceMapArray: ProduceMap[] = new Array<ProduceMap>();
ngOnInit() {
this.moderatorService.getProduceCountList().subscribe(result => {
(<any>Object).entries(result).forEach(entry => {
this.produceMapArray.push(new ProduceMap(entry[0], entry[1]));
});
this.produceNameList = new MatTableDataSource<ProduceMap>(this.produceMapArray);
});
}
getTotal(): number{
return this.produceMapArray.map(produceMap => produceMap.produceCount).reduce((acc, value) => acc + value, 0);
}
getAverage(): number{
return this.getTotal() / this.produceMapArray.length;
}
Thank you
EDIT: Sorry, forgot to add the object class
export class ProduceMap {
constructor(public produceName: string, public produceCount: number){}
}
Upvotes: 1
Views: 4768
Reputation: 4841
Wrong spelling : matHeaderCelDef
Replace this
<th mat-header-cell *matHeaderCelDef>Produce name</th>
with
<th mat-header-cell *matHeaderCellDef>Produce name</th>
Upvotes: 3