IONIC 2在UI

Question

问题陈述

我将外部JSON API数据调用到我的IONIC2应用程序中，并尝试在离子项中显示数据。我可以在我的应用程序中使用JSON数据但无法显示它。

请在下面找到我的代码：

pnr_status.html：

 <ion-card>
 <ion-card-header color="primary">
  PNR STATUS  
 </ion-card-header>

 <ion-list>
 <ion-item *ngFor="let res of pnrResult.passengers">
 <ion-label>
    Item Label
 </ion-label>
 <div item-content>
     Item {{res.current_status}}    
 </div>
 </ion-item>
 </ion-list>    
 </ion-card>

pnr_status.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Http} from '@angular/http';
import { RailwayServiceProvider } from '../../providers/railway-service/railway-service';
import 'rxjs/Rx';
/**
* Generated class for the PnrStatusPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()

@Component({
selector: 'page-pnr-status',
templateUrl: 'pnr-status.html',
})
export class PnrStatusPage {




 pnrResult = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http,
  private railwayService:RailwayServiceProvider) {
   this.get_pnr_status();
   alert(this.pnrResult);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PnrStatusPage');

  }

get_pnr_status(){


this.railwayService.getMessage().subscribe(data=>{this.pnrResult=data});


}

}

提供者：railway-services.ts

 import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do'
import 'rxjs/add/operator/catch'
import {Observable} from 'rxjs/Observable'
/*
  Generated class for the RailwayServiceProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class RailwayServiceProvider {

 private url:string=" JSON API URL";

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

getMessage(){

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

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

//Logout from resonse...........
private logResponse(res:Response)
{
  console.log(res);
}

//extract data from response.....
private extractData(res:Response){

  return res.json;
}

}

  

JSON响应

     

{“doj”：“1-8-2017”，“train_start_date”：null，“train_name”：“12841”，   “boarding_point”：{“name”：null，“code”：“HWH”}，“pnr”：“6704386702”，   “乘客”：[{“current_status”：“CNF / 12”，“booking_status”：   “CNF / 12 / TQ”，“coach_position”：0，“否”：1}]，“借方”：3，   “total_passengers”：1，“class”：“SL”，“journey_class”：{“name”：   “SLEEPER CLASS”，“code”：“SL”}，“chart_prepared”：true，   “from_station”：{“name”：“HOWRAH JN”，“code”：“HWH”}，“to_station”：   {“name”：“CHENNAI CENTRAL”，“code”：“MAS”}，“reservation_upto”：   {“name”：“CHENNAI CENTRAL”，“code”：“MAS”}，“response_code”：200，   “train_num”：“12841”，“train”：{“name”：“COROMANDAL EXP”，“number”：   “12841”}}

控制台日志：

我是IONIC2的新手。所以任何类型的帮助将不胜感激。提前谢谢。