Ionic 3 - JSONデータをObjectに変換してリストに表示する問題

Question

Ionic 3、Angular、Cordovaを使用してtravelApplicationを作成し、transportAPI.comの列車情報をリストに表示する予定です。

リストページのHTML：

<ion-content padding> 
    <ion-list> 
    <ion-item *ngFor = "let train of trainList"> 
     {{train.name}} 
    </ion-item> 
    </ion-list> 
</ion-content> 

私のホームページのコード、home.ts：

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

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    trainList = []; 

    constructor(private travelService : TravelServiceProvider) { 
    this.getTravel(); 
    } 

    getTravel(){ 
    this.travelService.getTravel().subscribe(data => this.trainList = data); 
    } 
} 

マイプロバイダクラスは次のとおりです。

@Injectable() 
export class TravelServiceProvider { 

    private url : string = "http://transportapi.com/v3/uk/places.json?query=&type=train_station&app_id=91676f07&app_key=e10dc441385db6f855e3e5ad29bcd6c8"; 

    constructor(private http: Http) { 
    console.log('Hello TravelServiceProvider Provider'); 
    } 

    getTravel(){ 
    return this.http.get(this.url) 
    .do(this.logResponse) 
    .map(this.extractData) 
    .catch(this.catchError) 
    } 

    private logResponse(res : Response){ 
    console.log(res); 
    } 

    private extractData(res : Response){ 
    return res.json(); 
    } 

    private catchError(error : Response | any){ 
    console.log(error); 
    return Observable.throw(error.json().error || "Server Error"); 
    } 
} 

JSONの列車名がリスト形式で表示されることを期待しています.HTMLの* ngFor式ではなく、何も表示されません{{train.name}}の代わりに表示され、「オブジェクトオブジェクト」との差分をとる際にエラーが発生します。唯一の配列や反復可能オブジェクトは、「許可されています。

すべてのヘルプははるかに高く評価されるだろう。

Answer 1

エラーはあなたがngForの配列を提供する必要が言うように、私はあなたがどのレスポンスオブジェクトのメンバプロパティにアクセスする必要があると思います配列は、

this.travelService.getTravel().subscribe((data:any) => this.trainList = data.member);