Ionic2,Angular2,HTTP和Observables

asa*_*hez 2 javascript observable typescript ionic2 angular

在阅读了我发现的关于可观察物的几乎所有内容之后,我仍然不太了解它们是如何工作的.

我在这里做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);
        });
    }
}
Run Code Online (Sandbox Code Playgroud)

在控制台上,正确打印this.webs.这意味着,get请求工作正常,我正在检索我想要的对象.这是一个普通的JSON对象.

问题是,在视图上,如果我尝试打印对象的某些属性(我在控制台上看到的相同属性),就像那样

{{ webs.name }}
Run Code Online (Sandbox Code Playgroud)

我得到了那个错误的全部时间:

Error in ./HomePage class HomePage - caused by: Cannot read property 'name' of undefined
Run Code Online (Sandbox Code Playgroud)

使用Angular 1非常容易:(我已经阅读了很多教程,但我找不到任何问题的答案.

谢谢你的帮助.

Sur*_*Rao 6

在返回http响应之前显示视图.

{{webs?.name}}
Run Code Online (Sandbox Code Playgroud)

应该管用.或者做this.webs=getWebs(){{webs.name | async}}