CODEWITHSUNDEEP
angulartypescriptangular-material
Maurice
Maurice

Reputation: 7401

angular material mat-table is throwing a 'template undefined' error

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

Answers (1)

Debojyoti
Debojyoti

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

Related Questions