2017-10-16 200 views
0

所以我試圖訂閱從本地JSON文件返回數據的簡單服務。訂閱observable正在返回undefined

我已經設法讓服務工作,我可以在函數中註銷它,但是當我訂閱角2組件中的服務時,它總是未定義的。我不知道爲什麼?任何幫助將非常感激。

API服務

export class ApiService { 
    public data: any; 

    constructor(private _http: Http) { 
    } 

    getData(): any { 
     return this._http.get('api.json').map((response: Response) => { 
     console.log('in response', response.json()); //This logs the Object 
     this.data = response.json(); 
     return this.data; 
    }) 
    .catch(this.handleError); 
    } 
} 

組件

export class AppComponent { 
    public data: any 
    public informationData; 

    constructor(private _api: ApiService) {} 

    public ngOnInit(): void { 
     console.log(this.getDataFromService()); // This return undefined 
    } 

    public getDataFromService() { 
     this._api.getData().subscribe(response => { 
      this.informationData = response; 
      return this.informationData; 
     }); 
    } 
} 
+0

'getDataFromService'本身並不返回任何東西。將'.subscribe'更改爲'.map'並返回結果的可觀察值,然後使用'|異步「在模板中解析它。 – jonrsharpe

+0

訂閱功能不會返回數據。它返回一個'Subscription'對象。即如果你返回函數調用本身。 –

+0

@SurajRao是的,我注意到了這一點,我如何得到它返回響應數據? –

回答

-1

嘗試用:

getData(): any { 
     return this._http.get('api.json'); 
} 

getData(): any { 
      return this._http.get('api.json').map((response: Response) => { 
    response.json(); 
}) 
0

您在同步和異步功能之間存在問題。你的問題是:getDateFromService是同步的,裏面的內容是異步的。所以當ngOnInit函數調用getDataFromService時,你的代碼不會等待異步任務。你的getDataFromService需要返回一個觀察者或需要實現你的API的返回(你需要選擇)。

public ngOnInit(): void { 
    console.log(this.getDataFromService().subscribe(data => console.log(data)); // This return undefined 
} 

public getDataFromService() { 
    return this._api.getData(); 
} 
+0

這很好,但是當我嘗試將數據添加到類變量時,它仍然返回undefined –

+0

你想在哪裏獲得你的api的響應?因爲你的問題在於你使用同步/異步功能。如果在你的類中有'undefined',那麼你的類在執行'console.log'之前不會等待異步調用響應。 –

1

也許有些照片有幫助嗎?

這裏的數字表示操作順序。

發送HTTP請求, enter image description here

  1. 組件被初始化,並調用movieService的getMovies方法。
  2. movieService getMovies方法返回一個Observable。不是現在的數據。
  3. 組件在返回的Observable上調用subscribe
  4. get請求提交給服務器進行處理。
  5. ngOnInit方法已完成。

這裏subscribe之後的任何代碼,因爲該數據尚未返回不能訪問movies屬性。

收到HTTP響應 enter image description here

在某個時間稍後...

  • 的電影被返回給服務。
  • 如果進程成功,則執行第一個回調函數。
  • 將本地電影屬性分配給從服務返回的電影。只是在這裏,電影屬性終於設置。
  • 嘗試在步驟#8之前訪問movies屬性會導致錯誤。

    我們可以在這裏訪問這個值嗎? NO enter image description here

    要解決這個問題: enter image description here

    0
    objResponse; 
    this.service.getData().subscribe((result: any)=> { 
    this.objResponse=result; 
    } 
    

    返回的東西不會要求