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

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>