マットテーブルにエラーが表示され、値が表示されない

Question

restapiサービスの値を表示するマテリアルアングルテーブル。

angular5のtypecriptを使用します。

配列形式

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

とここに私のtypescriptですコード

iは材料angular.pleaseに新しいですエラーの

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の内部で生成するオブジェクトの配列でなければなりません。

応答をオブジェクトの配列に変更するか、オブジェクトを空の配列にプッシュします。