How can i show this data in my html with ionic 2 from a json?

Question

This is simply to explain, I have a side menu in my app and when I click on the first option ("Carne") it opens another page which should show all recipes of the type: "Carne" .

My problem is that I can't show the recipes, the page is still empty when I use a ngFor for showing the details of a recipe.

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

}

Answer 1

Well I had got the solution. Just I didn't declarate the push in app.component.ts

I had got this:

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

And I had to do this:

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