无法读取未定义的属性“模板”

Question

无法在表格中显示数据

**打字稿代码**

  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文件** 为了显示表格中的数据，我正在使用具有分页的材料表

<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>

**数据服务** 从服务器检索数据

@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[])
       );

}

}  我从material.angular.io

接近这个

Answer 1

您不应在mat-cell中使用 ngFor ，类似地，您需要为所有列执行此操作。

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