如何使用JSON的离子2在我的HTML中显示这些数据

Question

这只是为了解释，我的应用中有一个侧菜单，当我单击第一个选项（" carne"）时，它将打开另一个页面，该页面应显示type: "Carne"的所有配方。

我的问题是我无法显示食谱，当我使用ngFor显示食谱的详细信息时，页面仍然为空。

" carne"的页面

html：

<ion-header>
  <ion-navbar >
    <ion-title >{{tipo.tipo}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-card >
  <ion-card-content *ngFor="let receta of recetas">
    <p>{{receta.Nombre}}</p>
  </ion-card-content>

</ion-card>
</ion-content>

json：

"data": [
        {
            "tipo":"Carne",
            "recetas":[
                {
                    "Nombre":"Big Mac.",
                    "Complejidad": "1",
                 ...
                }
            ]
        }

.ts：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { Http } from '@angular/http';

@Component({
  selector: 'page-lista',
  templateUrl: 'lista.html',
})
@IonicPage({
  name:'lista-page'
})
export class ListaPage {

  private tipo: string="";
  private recetas: any="";
  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
    this.tipo = this.navParams["data"];
    this.getData();
  }
  getData(){
    this.http.get('/assets/data/datosReceta.json')
      .map((res)=>res.json())
      .subscribe(data=>{
        console.log(this.tipo);
        for(let tipo of data["data"]){
          if(tipo["tipo"]==this.tipo){
            this.recetas=tipo["recetas"];
            console.log(this.tipo);
          }
        }
    },(rej)=>{console.error("Error",rej)})  
  }
}

Answer 1

我得到了解决方案。只是我没有在app.component.ts

中宣布推送

我得到了：

openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.push(ListaPage, page);
  }

我必须这样做：

 openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.push(ListaPage, page.tipo);
  }