顯示離子2中的JSON對象

我試圖在離子2應用程序中顯示下面的JSON對象。運行應用程序時，我得到一個空白屏幕。我嘗試了一些教程，但沒有進展。顯示離子2中的JSON對象

[ 
    { 
    "program_id": 1000, 
    "programName": "Luna_Titan_L", 
    "costElement": "Material Cost", 
    "trackingID": "LT001S", 

    }, 
    { 
    "program_id": 1001, 
    "programName": "Luna_Titan_L", 
    "costElement": "Material Cost", 
    "trackingID": "LR001S" 
    }, 

..... 
]

home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

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

    progs: any; 

    constructor(public navCtrl: NavController, public http: Http) { 
    this.http.get('http://url.com/api').map(res => res.json()).subscribe(data => { 
     this.progs = data; 
    }); 

} 

}

home.html的

<ion-list> 

    <ion-item *ngFor="let prog of progs"> 
     {{prog.programName}} 
    </ion-item> 

    </ion-list>

來源

2017-04-04 Abhishek

這不是有效的JSON，雖然...？你是否爲了演示目的而裁減它？你的控制檯是否輸出任何錯誤？ – Patrick

移動的構造外的服務電話，並把它裏面ngOnInit

ngOnInit() { 
this.http.get('http://url.com/api').map(res => res.json()).subscribe(data => { 
     this.progs = data; 
    }); 
}

來源

2017-04-04 12:33:44 Sajeetharan

那麼問題是什麼？ – Sajeetharan

是的，如果它工作正常..你在這裏得到什麼問題？ –

即時獲得空白頁 – Abhishek

儘管最好在生命週期鉤子中執行異步調用，而不是像@Sajeetharan在他的回答中提到的構造函數，但問題是在設置了progs之前，視圖會被加載。使用*ngIf來檢查值，以便在設置值後加載它。

<ion-list *ngIf="progs"> 

    <ion-item *ngFor="let prog of progs"> 
     {{prog.programName}} 
    </ion-item> 

    </ion-list>

來源

2017-04-04 12:40:24

顯示離子2中的JSON對象

回答

相關問題