2017-09-07 16 views
1

Angular 2+(4.3.6)では、新しいHttpClientにREST APIを使用しています。私のAPIサービスでapiの応答から観測可能な配列を作成する

{ 
    count: number, 
    results: MyObject[] 
} 

私がデータを取得するには、次の機能があります: APIは以下のように定義されたJSONオブジェクトを返す私のアプリのコンポーネントで

public getList(): Observable<ApiResponse> { 
return this.http.get<ApiResponse>(url); } 

を私はデータを表示したいです'async'パイプを使用して配列内のオブジェクトの配列を返します。そのため、私は結果

results: Observable<MyObject[]>; 

とinit関数で

ngOnInit() { 
    this.results = this.myService.getList(); 
} 

し、最終的にテンプレート

<div *ngFor="let item of results | async"> 
      {{ item.id }} 
</div> 

で私は角に非常に新しいですし、それを把握することはできませんという変数を持っていますローカルオブジェクトを作成せずに非同期パイプを使用して結果配列にアクセスする方法:

temp: MyObject[]; 
ngOnInit() { 
    this.temp = this.myService.getList().subscribe(data => this.temp = data.results); 
} 

誰でもこれを行う方法を知っていますか?

import "rxjs/add/operator/map";  

this.results = this.myService.getList().map(res => res.results); 

あなたはその後、非同期パイプまたはサブスクリプションを経由して、これをアクセスすることができます:それはあなたが別の変換に基づいて、観察を作成することができます -

+0

それはそれが多かれ少なかれ動作する方法です。 'http request' - >' observable' - > 'subscription' ---> data –

答えて

0

これはmapオペレータが何のためにあるのかです。

+0

これが実際に探していたものかどうかを知りたいです。彼らはコンポーネント内の観測可能なものをスキップしたいと思ったように聞こえました。彼らはそれをローカルオブジェクトとして作成する必要があります。 –

+0

@ Z.Bagley:クラスフィールドを完全にスキップするのか、サブスクライブしないよう手動で値を抽出するのか、100%明確な質問はありませんでした。私は後者を前提としていましたが、もし前者が終わったら、私は自分の答えを削除/編集します。 –

0

私は非常に疑問を得ることはありませんので、私はあなたの可能性のあるエラーを書き換えます:

1 - あなたのサービスは、あなたがそれを購読し、サブスクライブに値を設定しなければならないという意味、観測を返します。

ngOnInit() { 
    this.myService.getList().subscribe(list => this.results = list); 
} 

2 - あなたは結果(またはあなたのcustomObject)として、あなたの結果を入力する必要があり、それを行うので

results: MyObject[]; 

3 - 角度応答はあなたが必要とするカスタムオブジェクトを返します返す前にマップする:

return this.http.get(url).map(r => r.json() ? r.json() : r); 

その後、あなたのHTMLで、非同期パイプが機能するはずです。

関連する問題