Ionic2，Angular2，HTTP和Observable

閱讀了幾乎所有關於observables的信息後，我仍然不太清楚它們是如何工作的。Ionic2，Angular2，HTTP和Observable

我在這裏做的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正確打印。這意味着，獲取請求工作正常，我正在檢索我想要的對象。這是一個普通的JSON對象。

的問題是，在視圖上，如果我嘗試打印對象的某些屬性（相同的屬性我在控制檯上看到）這樣的

{{ webs.name }}

我得到的全部時間的錯誤：

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

這是與角1的sooo容易:(我已經讀了很多教程，但我找不到任何回答我的問題。

感謝您的幫助。

來源

2016-11-30 antsanchez

在返回http響應之前顯示視圖。

{{webs?.name}}

應該工作。或做this.webs=getWebs() 和{{webs.name | async}}

來源

2016-11-30 16:02:05

它的工作使用{{網？。名稱}}和this.web = getWebs（）非常感謝！ – antsanchez

它應該是

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

等你以後做getWebs是this.This未經測試的代碼，但你的邏輯。您在獲取數據之前打電話。

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

來源

2016-11-30 16:14:58 flakerimi

Ionic2，Angular2，HTTP和Observable

回答

相關問題