在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"
  },
.....
]

首页

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;
    });
 }
}

首页.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>