Ionic2, Angular2, HTTP und Observables

Question

Nachdem ich fast alles gelesen habe, was ich über Observables herausgefunden habe, verstehe ich immer noch nicht genau, wie sie funktionieren.

Ich tue das http-Anfrage hier:

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

Auf der Konsole wird this.webs korrekt gedruckt. Das heißt, die get-Anfrage funktioniert einwandfrei und ich erhalte das gewünschte Objekt. Das ist ein normales JSON-Objekt.

Das Problem ist, auf der Ansicht, wenn ich versuche, eine Eigenschaft des Objekts (die gleichen Eigenschaften ich auf der Konsole zu sehen) zu drucken, wie die

{{ webs.name }} 

ich die ganze Zeit, dass die Fehlermeldung erhalten:

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

Das sooo einfach mit kantigem 1 war :(ich lese schon eine Menge Tutorials, aber ich keine Antwort auf mein Problem nicht finden können.

vielen Dank für Ihre Hilfe.

Answer 1

Die Ansicht wird angezeigt, bevor die HTTP-Antwort zurückgegeben wird.

{{webs?.name}} 

sollte funktionieren. Oder this.webs=getWebs() und {{webs.name | async}}

Answer 2

Es sollte

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

so etwas sein, nachdem Sie getWebs this.This tun ist ungetestet Code, aber Sie die Logik erhalten. Sie rufen an, bevor Sie Daten erhalten.

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