2017-10-16 19 views
0

サービスを構築しました。これはAPI観測可能な特定のIDを取得します。サービスは、サービスクラスからのconsole.log(データ)でも動作していますが、コンポーネント内のデータを取得できません。APIサービスからデータを取得する角度4

See the console

サービス:

getSpecificStory(storyId) { 
    return this.getToken() 
     .map(idToken => { 
     let headers = new Headers(); 
     headers.set('user_token', idToken) 
     return this.http 
      .get(`${this.apiUrl}/stories/${storyId}`, { headers: headers }) 
      .subscribe((res: Response) => { 
      const data = res.json(); 
      console.log(data) 
      return data; 
      }); 
     }) 
     .catch(this.handleError); 
    } 

コンポーネント:

export class StoryModalComponent implements OnInit { 
    story: any; 
    storyId: any; 
    hitsArray: Array<Object>; 

    constructor(private storiesService: StoriesService, private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.route.params 
     .subscribe(
     params => { 
     this.storyId = params['storyId'] 
     }) 
    console.log(this.storyId) 
    this.getStoryObject(); 
    } 


    getStoryObject() { 
    console.log(this.storyId) 
    this.storiesService.getSpecificStory(this.storyId) 
     .subscribe(
     (data) => { 
     this.story = data; 
     console.log(this.story) 
     }) 
    } 
} 
+0

はどのようにあなたのコンポーネントの外観を行います? – Sajeetharan

+0

私は掲示したように?あなたはHTMLを意味しますか?ところで、 "getToken()"関数は気にしないでください。それはfirebaseバックエンドのユーザのid_tokenを取得するためだけのものです。 – byblix

答えて

1

mapではなくflatMap演算子を探しています。

getSpecificStory(storyId) { 
    return this.getToken() 
     .flatMap(idToken => { 
      let headers = new Headers(); 
      headers.set('user_token', idToken) 
      return this.http 
       .get(`${this.apiUrl}/stories/${storyId}`, { headers: headers }) 
     }); 
    }) 
} 

.flatMapは、あなたが観測可能(あなたのケースでthis.http.get(...))を返すように期待しています。 getSpecificStoryメソッドがobservableを返すようになりました。だから、あなたのコンポーネントにサブスクライブ

this.storiesService.getSpecificStory(this.storyId) 
    .subscribe(
     (data) => { 
      this.story = data; 
      console.log(this.story) 
     }) 

これはあなたが依存して観測を連鎖されている一般的な方法である(あなたのfirebase入手トークン()メソッドとあなたのthis.http.get())

+2

ええ、それはトリックをした!私はまだRxJsライブラリを学んでいます。だから、ありがとう! – byblix

1

あなたはcomonentのメソッドを購読ユーザーに順番に観測可能返すことがあります。

getSpecificStory(storyId) { 
return this.getToken() 
    .map(idToken => { 
    let headers = new Headers(); 
    headers.set('user_token', idToken) 
    return this.http 
     .get(`${this.apiUrl}/stories/${storyId}`, { headers: headers }) 
     .map((res: Response) => res.json()); 
     .catch(this.handleError); 
    }) 
    .catch(this.handleError);} 
+0

「地図」を使用している以外は私と違いはありませんか?あなたがサービスを見ているなら、私は "返信データ"でデータを返しています。 – byblix

関連する問題