Typescript 无法读取属性'；模板&x27；未定义的

无法在表中显示数据

**打字脚本代码**

  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() {}
}

displayedColumns=[“血压”、“用户名”、“体重”、“身高”]；
@ViewChild（MatPaginator）分页器：MatPaginator；
@ViewChild（MatSort）排序：MatSort；
dataSource=新的VisitDataSource（this.dataService）；
出口接口访问{
ID：编号；
用户名：字符串；
高度：数字；
重量：个数；
}
导出类VisitDataSource扩展数据源{
构造函数（专用数据服务：数据服务）{
超级（）；
}
connect（）：可观察{
返回这个.dataService.getvisions（）；
}
断开连接（）{}
}

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

血压
{{visit.ID}
用户名
{{visit.username}
高度
{{visit.height}}

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

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

}

@Injectable（）
导出类数据服务{
构造函数（私有http:http，私有authenticationService:authenticationService）{}
getVisites（）：可观察{
const headers=新的头（{'Content-Type'：'application/json'，}）；
const options=newrequestoptions（{headers:headers}）；
返回此.http.get（'/getallvisits/'，options）
.pipe（映射（res=>res.json（）作为访问[]）
);
}

}

---

我是从material.angular.io

来处理这个问题的，您不应该在mat cell内部使用

ngFor

，同样地，您需要对所有列使用它

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

血压 {{visit.ID}