使用Angular 2 Http從REST Web服務獲取數據Http

Question

我想從使用Angular 2 Http的REST Web服務獲取數據。

予先在調用它的客戶端組件類的構造注入服務：

constructor (private _myService: MyService, 
      private route: ActivatedRoute, 
      private router: Router) {} 

我添加調用爲MyService的方法來從web服務獲取數據的getData（）方法：

getData(myArg: string) { 
    this._myService.fetchData(myArg) 
     .subscribe(data => this.jsonData = JSON.stringify(data), 
     error => alert(error), 
     () => console.log("Finished") 
    ); 

    console.log('response ' + this.jsonData); 

我調用客戶端組件類的ngOnInit方法getData（）方法（I正確導入並實現了的OnInit接口）：

this.getData(this.myArg); 

這裏是爲MyService服務：

import { Injectable } from '@angular/core'; 
    import { Http, Response } from '@angular/http'; 
    import 'rxjs/add/operator/map'; 

    @Injectable() 
    export class MyService { 
     constructor (private _http: Http) {} 

     fetchData(myArg: string) { 
      return this._http.get("http://date.jsontest.com/").map(res => res.json()); 
     } 
    } 

我不設法獲取數據，當我嘗試在上面的getData（）方法使用console.log('response ' + this.jsonData);測試它，我在瀏覽器中得到response undefined。

PS：jsonData是客戶端組件類的字符串屬性。

Answer 1

由於http請求是異步的，當您嘗試將其記錄到控制檯時，將不會設置this.jsonData。而是將該日誌放入訂閱回調中：

getData(myArg: string){  
    this._myService.fetchData(myArg) 
      .subscribe(data => { 
          this.jsonData = JSON.stringify(data) 
          console.log(this.jsonData); 
         }, 
         error => alert(error), 
         () => console.log("Finished") 
    ); 
}