如何在我的 html 中使用来自 json 的 ionic 2 显示这些数据？答案

【问题标题】：How can i show this data in my html with ionic 2 from a json?如何在我的 html 中使用来自 json 的 ionic 2 显示这些数据？
【发布时间】：2018-05-21 23:58:22
【问题描述】：

这只是为了解释，我的应用程序中有一个侧边菜单，当我单击第一个选项（“Carne”）时，它会打开另一个页面，该页面应显示 type: "Carne" 的所有食谱。

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

Page of "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)})  
  }

}

【问题讨论】：

你能创建一个同样问题的 plunkr 页面吗？
我可以创建一个 plunkr 但我必须创建所有 myApp 文件夹...我的意思是所有 ionic 文件夹
如果你记录 this.recetas 而不是 this.tipo 你会得到预期的结果吗？
不，我在控制台中什么都没有。听起来很奇怪
get结果中data和tipo的实际结果是什么

标签： javascript html json ionic-framework ionic2

【解决方案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);
  }

【讨论】：