在ionic2中顯示JSON對象

Question

我試圖在ionic2應用程序中的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>

Answer 1

將服務調用移到構造函數之外，並將其放置在ngOnInit中

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

Answer 2

雖然最好在生命周期掛鈎中執行異步調用，而不是像@Sajeetharan在其回答中提到的構造方法那樣進行，但您的問題是在設置progs之前先加載視圖。 使用*ngIf檢查該值，以便在設置該值后加載該值。

<ion-list *ngIf="progs">

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

  </ion-list>