角度2が観測可能どのように応答を抽出するのですか？

Question

import { Injectable }  from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 

// Import RxJs required methods 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch' 

@Injectable() 
export class EquipmentService{ 
    data: any; 
    constructor(private http:Http){ 

    } 
    getDefaultEquipment(){ 
     this.http.get('./app/SaveData/equipmentTest.json') 
      .map((res:Response) => res.json()) 
      .subscribe(data => { this.data = data}, 
       err => console.error(err), 
       () => console.log(this.data)); 
    } 
} 

重要なビットはgetDefaultEquipment()です。

最後のconsole.log（this.data）が表示されていれば、データは正確です。これは私が必要とするものです。しかし、私はreturn this.http.get(...() => {return this.data})私は未定義になる場合。私はどのように取得し、this.dataを返すのですか？

明らかに、次のような別のリターンを書き込むと、オブザーバブルがまだ完了していないため、空のデータが返されます。

//clearly won't work because the get hasn't returned yet 
getDefaultEquipment(){ 
    this.http.get(...data => {this.data = data}...); 
    return this.data; 
} 

Answer 1

以下は私の取り組みです。テストされていませんが、コンセプトは堅実です。これは、基本的にObservablesを食べているasyncパイプのために、定型コードをたくさん節約できます。いくつかの変換を行う必要がある場合は、オブザーバブルを返す前にも可能です。あなたはサービスの中でそれを行うこともできるし、コンポーネント内で行うこともできます。 Observablesについて覚えておいてください。複数のユーザがいる場合は.share()演算子を使用してください。そうでなければ、http.getを各サブスクライバに対して1回実行してください。同じことが便利になることができる.do演算子のために行くだけでなく、加入者のように動作します。

RxJを読んで、非同期パイプの使用に関する角度ウェブサイトの例を見てみることをお勧めします。

• http://blog.angular-university.io/functional-reactive-programming-for-angular-2-developers-rxjs-and-observables/
• https://angular.io/docs/ts/latest/guide/pipes.html

角度AsyncPipeは不純なパイプの興味深い例です。 AsyncPipeはPromiseまたはObservableを入力として受け取り、入力に自動的にサブスクライブし、最終的に放出された値を返します。

equipment.service.ts

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 

export interface Equipment { 
    name: string; 
    id: string; 
} 

@Injectable() 
export class EquipmentService { 

    constructor(private http:Http){} 

    public getDefaultEquipment(): Observable<Equipment[]> { 
    return this.http 
    .get('./app/SaveData/equipmentTest.json') 
    .map((res:Response) => res.json()); 
    } 
} 

機器-list.component.ts

import { Component, OnInit } from "@angular/core"; 
import { EquipmentService, Equipment } from "./services/equipment.service"; 
import { Observable } from 'rxjs/Rx'; 

@Component({ 
    selector: 'equipment-list', 
    templateUrl: './equipment-list.component.html', 
    styleUrls: ['./equipment-list.component.css'], 
    providers:[ 
    EquipmentService 
    ] 
}) 
export default class EquipmentComponent { 

    constructor(private service: EquipmentService) {} 

    public get equipment():Observable<Equipment[]> { 
     return this.service.getDefaultEquipment(); 
    } 
} 

機器-list.component.html

<ul> 
    <li *ngFor="item of (equipment | async)> 
     <span>{{item.id}}</span> 
     <span>{{item.name}} 
    </li> 
</ul>