Kann nicht Eigentum 'template' undefinierter

Question

kann nicht angezeigt werden Daten in Tabelle

** Typoskript 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-Datei ** Für die Anzeige der Daten gelesen in der Tabelle mit Paginierung verwende ich Material Tabelle

<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 Dienst ** Abrufen von Daten vom 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[]) 
     ); 

} 

} Ich gehe dies aus material.angular.io

Answer 1

Sie nicht ngFor innerhalb mat-Zelle verwendet werden sollen, in ähnlicher Weise müssen Sie um es für alle Spalten zu tun.

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