テンプレートにjsonデータを表示

Question

誰かが私のデータを表示するのを助けることができるのだろうかと思っていました。

私はAPIを呼び出すカスタムプロバイダを用意していますが、これは完全に機能します。作業

ページイムは「演奏」して、私のplaying.tsファイルには、次

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { PlayingService } from '../../providers/playing-service/playing-service'; 

@Component({ 
    templateUrl: 'build/pages/playing/playing.html', 
}) 

export class PlayingPage { 

    sports: any; 

    constructor(private playing: PlayingService, private navCtrl: NavController) { 
     this.loadSports(); 
    } 

    loadSports() { 
     this.playing.getAllSports() 
      .then(data => { 
       this.sports = data; 
       console.log(data); 
      }); 
    } 

} 

コンソールログには次のように表示のようになります。

マイplaying.htmlファイルがどのように見えます次

<ion-content padding class="playing-screen"> 
    <ion-list> 
    <ion-item *ngFor="let sport of sports" > 
     <h3>{{sport}}</h3> 
    </ion-item> 
    </ion-list> 
</ion-content> 

次のようにエラーイム取得は次のとおりです。

'オブジェクト'タイプの異なる[オブジェクトオブジェクト]を見つけることができません。唯一のそのようなアレイ

少し混乱イムとして反復可能オブジェクトへの結合をサポートしていNgFor、イオン2ベータ11

で任意の助けを作業イムをいただければ幸いです。

平和！

Answer 1

私は、誰もが同じ問題に遭遇し包み答えを考え出しました。私のプロバイダで

、私は新しい約束を作成して、私のHTTP GETを実行すると、i）は（私はres.jsonに返される配列名を追加するために必要な次の行に

.map(res => res.json()) 

を持っていたので、私の次のように行を編集するように修正しました：

私はこれが誰かを助けることを望みます。

平和！

Answer 2

エラーメッセージはかなり簡単です。 NgForは、配列（または配列のようなiterables）に対してのみ機能します。オブジェクトを反復することはできません。あなたが反復したい何
はあなたdataオブジェクト内のsports配列なので、解決策は簡単です：

loadSports() { 
    this.playing.getAllSports() 
     .then(data => { 
      this.sports = data.sports || []; //for safety 
     }); 
}