在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>