Ionic2、Angular2、HTTPおよびObservables

Question

私が観察したものについてほとんどすべてを読んだ後、彼らはどのように動作するかはまだかなり分かりません。

私はここにhttpリクエストをしています：

import { Component, OnInit, Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { NavController } from 'ionic-angular'; 
import { Observable } from 'rxjs/Rx';  
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    webs: any; 

    getWebs(): any{ 
     return this.http.get('here the url') 
     .map((res: Response) => res.json()); 
    } 

    constructor(public navCtrl: NavController, private http: Http) {} 

    ngOnInit(){ 
     this.getWebs().subscribe(response => { 
      this.webs = response; 
      console.log(this.webs); 
     }); 
    } 
} 

をコンソールで、this.websが正しく印刷されます。つまり、get要求がうまく動作していて、私が望むオブジェクトを取得しようとしています。これは通常のJSONオブジェクトです。

：

問題は、私はその

{{ webs.name }} 

のようなオブジェクト（私はコンソールに表示同じプロパティ）のいくつかのプロパティを印刷しようとした場合、私は全体の時間そのエラーを取得し、ビューに、です私はすでにチュートリアルをたくさん読んで、私は私の問題への答えを見つけることができません。あなたの助けを

感謝。角1 :(とすっごく簡単だった

Error in ./HomePage class HomePage - caused by: Cannot read property 'name' of undefined 

Answer 1

http応答が返される前にビューが表示されます。

{{webs?.name}} 

が有効です。 それともgetWebsはthis.Thisを行った後それはとても何か

this.getWebs().then((webs) => { 
    webs.subscribe(response => { 
     this.webs = response; 
     resolve(webs); 
     console.log(this.webs); 
    }); 
}) 

あるべきthis.webs=getWebs() と{{webs.name | async}}

Answer 2

を行うには、テストされていないコードですが、ロジックを取得します。 データを取得する前に呼び出しています。

ngOnInit(){ 
    return new Promise(resolve => { 
     this.http.get('webs.json') 
      .map(res => res.json()) 
      .subscribe(webs => { 
        this.webs = webs; 
        resolve(this.webs); 
      }); 
      }); 
    }