mat-table显示错误而不显示值

Question

材料角度表，用于显示来自restapi服务的值。

使用angular5打字稿。

以数组格式从服务获取值

<mat-table #table >
          <ng-container matColumnDef="username">
              <mat-header-cell> `ID` </mat-header-cell>
              <mat-cell *ngFor="let visit of Visits"> {{visit.username}} 
               </mat-cell>
           </ng-container>

      <ng-container matColumnDef="height">
        <mat-header-cell> ID </mat-header-cell>
        <mat-cell *ngFor="let visit of Visits"> {{visit.height}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="weight">
        <mat-header-cell> Progress </mat-header-cell>
        <mat-cell *ngFor="let visit"> {{visit.weight}}% </mat-cell>
      </ng-container>
       <ng-container matColumnDef="patientnote">
        <mat-header-cell > Name </mat-header-cell>
        <mat-cell *ngFor="let visit"> {{visit.patientnote}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="doctornote">
        <mat-header-cell > Color </mat-header-cell>
        <mat-cell *ngFor="let visit"> {{visit.doctornote}} </mat-cell>
      </ng-container>

    </mat-table>

和我的打字稿代码

export class HomeComponent implements OnInit {

    public Visits: any;

   public constructor(private location: Location, private http: Http, private router: Router){

       }

   public ngOnInit() {
    this.http.get('http://localhost:8080/api/visit')
    .map(result => ['result'])
    .subscribe(result => {

       this.Visits = result ;

        console.log('submit get click happend ' + this.Visits );

    });

  }

错误的屏幕截图

我是物质角的新手。请帮助我解决它。 提前谢谢你。

Answer 1

您的响应只是一个普通对象，它应该是在DOM中生成ngFor内部的对象数组。

将您的响应更改为对象数组，或将对象推送到空数组。