単一配列のJSONオブジェクトは印刷されません（Ionic 2）

Question

私はレシピ用のAPIからデータを取得していますが、既にうまく機能しているレシピのリストを持っていますが、今は単一のレシピの詳細を呼び出すようになりました（1オブジェクト ）。以下の私のコンソールログは、JSONの外観です。私がフロントエンドに表示することができないものがあれば、できる限り手伝ってください。

活字体

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

は、あなたが実際にapiであなたのオブジェクトを持っているとき

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

を表示しようとしている

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

ここにセーフナビゲーションオペレータを追加してください。 {{api?.id}}

Answer 2

あなたは、実際に多くの事をしようとしているとのいずれかで行うことができます泣き言

あなたはpromiseとobservableの両方を使用しており、そのうちの1つを避けることができます。私はそれがデフォルトで来るのでobservableと言うでしょう。

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

ここに詳細があります。そう、これはおそらく、あなたのテンプレートビットを変えてクリアしてください

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

：