Cannot read property 'template' of undefined

Question

Unable to display data in table

** Typescript code **

  displayedColumns = ['bloodpressure', 'username', 'weight', 'height'];
   @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  dataSource = new VisitDataSource(this.dataService);

export interface Visit {
  ID: number;
  username: string;
  height: number;
  weight: number;
}
export class VisitDataSource extends DataSource<any> {
    constructor(private dataService: DataService) {
      super();
    }
    connect(): Observable<Visit[]> {
      return this.dataService.getvisits();
    }
    disconnect() {}
}

** HTML file ** For displaying the data in the table i am using material table with pagination

<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="bloodpressure">
        <mat-header-cell *matHeaderCellDef> BloodPressure </mat-header-cell>
        <mat-cell *ngFor="let visit of Visit"> {{ visit.ID }} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="username">
        <mat-header-cell *matHeaderCellDef> UserName </mat-header-cell>
        <mat-cell *ngFor="let visit of Visit"> {{ visit.username }} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="height">
        <mat-header-cell *matHeaderCellDef> Height </mat-header-cell>
        <mat-cell *ngFor="let visit of Visit"> {{ visit.height }} </mat-cell>
      </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

** DATA Service ** Retrieving data from the server

@Injectable()
export class DataService {
constructor(private http: Http, private authenticationService: AuthenticationService) {}
getvisits(): Observable<Visit[]> {
    const headers = new Headers({'Content-Type': 'application/json',});
    const options = new RequestOptions({ headers: headers });
   return this.http.get('/getallvisits/', options)
     .pipe(map( res => res.json() as Visit[])
       );

}

} I approach this from material.angular.io

Sajeetharan Sajeetharan · Accepted Answer · 2017-12-26T14:50:24

You should not use ngFor inside mat-cell , similarly you need to do it for all columns.

 <mat-header-cell matHeaderCellDef> BloodPressure </mat-header-cell>
        <mat-cell   matCellDef="let visit" > {{ visit.ID }} </mat-cell>
 </ng-container>

Cannot read property 'template' of undefined

1 Answers