Single-Array-JSON-Objekt wird nicht gedruckt (Ionic 2)

Question

Ich ziehe Daten aus einer API für Rezepte, ich habe bereits eine Liste von Rezepten, die gut funktioniert, aber ich fordere jetzt eine einzelne Rezepte Details (1 Objekt). In meinem Konsolenprotokoll sehen Sie, wie der JSON aussieht. Was auch immer ich tue, kann ich nicht am Frontend anzeigen, bitte helfen Sie, wo Sie können.

Typoskript

details: any; 

loadDetails() { 
    if (this.details) { 
    return Promise.resolve(this.details); 
    } 

    return new Promise(resolve => { 
    this.http.get('http://api.yummly.com/v1/api/recipe/Crustless-Ham-Savory-Bake-2005439?_app_id=//////&_app_key=/////') 
     .map(res => res.json()) 
     .subscribe(data => { 
     console.log(data); 
     this.details = data; 
     resolve(this.details); 
     }); 
    }); 
} 

HTML

<ion-content> 
    <ion-list> 
     <ion-item> 
      <h1>{{details.id}}</h1> 
     </ion-item> 
    </ion-list> 
</ion-content> 

Pagename.ts

@Component({ 
    selector: 'page-details', 
    templateUrl: 'details.html', 
    providers: [ApiAuthentication] 

}) 
export class DetailsPage { 

    public api: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication) { 
    this.loadRecipes(); 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad DetailsPage'); 
    } 

    loadRecipes(){ 
    this.apiAuthentication.loadDetails() 
    .then(data => { 
     this.api = data; 
    }); 
    } 
} 

Answer 1

Sie versuchen

<h1>{{details.id}}</h1> 

anzuzeigen, wenn Sie in der Tat Ihr Objekt in api haben:

loadRecipes(){ 
    this.apiAuthentication.loadDetails() 
    .then(data => { 
     this.api = data; // you store it in api! 
    }); 

so sollte dies wahrscheinlich nur, wenn Sie Ihre Vorlage ein wenig ausgeräumt werden:

<h1>{{api.id}}</h1> 

und vielleicht fügen Sie hier auch den sicheren Navigationsoperator hinzu. {{api?.id}}

Answer 2

Du viele Sache tatsächlich versuchen und kann mit einem getan werden die Tings.

Sie verwenden beide Versprechen und beobachtbar und Sie können eine von ihnen vermeiden. Ich würde sagen, benutze beobachtbar wie es standardmäßig kommt.

loadDetails() { 
    if (this.details) { 
    return null; 
    } 

    this.http.get('http://api.yummly.com/v1/api/recipe/Crustless-Ham-Savory-Bake-2005439?_app_id=//////&_app_key=/////') 
     //.map(res => res.json()) // you don't need this 
     .subscribe(data => { 
     console.log(data); // make sure the data is the object you are expecting and have the id property 
     this.details = data; // not necessary if you will use async pipe 
     }); 
    }); 
} 

hier details.id sollte verfügbar sein.