角度オブザーバを使用してネットワーク上でデータを取得する

Question

私はユーザーが追加できる（財務）取引のリストを含む角度アプリに取り組んでいます。これはうまくいきました。サービスから提供された静的リストから、ローカルNode.jsサーバーからデータを取得しようとすることに切り替えようとしています。私はトランザクションのリストを非同期的にフェッチするためにオブザーバを使用しています。

私はAngularのHTTP tutorialと関連するplunkerと一緒に従っています。しかし、サーバーからのデータを見ることはできますが、.subscribe（）メソッドを使用して有用なデータセットを取得するのに問題があります。

var TRADES = { "trades": [ 
    {"id": 0, "cust": "Ben", "hasSub": true, 
     "subcust": "Rigby", "type": "s", "security": "001", "ticket": "99"}, 
    ... 
    {"id": 9, "cust": "Uber Bank", "hasSub": true, 
      "subcust": "Lil Bank", "type": "p", "security": "456", "ticket": "56"} 
]}; 


////////////Get Requests///////////////// 

//this route returns all data in JSON format 
app.get('/', function(req, res) { 
    res.send(JSON.stringify(TRADES)); 
    }); 

そしてgetTradesから期待される出力：

@Injectable() 
export class TradeService { 
    private url = '...'; // URL to web API 
    tradeArray: Trade[] = []; 
    constructor(private http: Http) { } 
    //-----------GETTERS---------------// 
    getTradeObservable(): Observable<Trade> { 
    return this.http.get(this.url) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    console.log("body:" + body); 
    console.log("Entire Body.trades: " + body.trades); 
    return body.trades; 
    } 

    getTrades(): any { 
    this.getTradeObservable() 
     .subscribe(
      trade => this.tradeArray.push(trade)); 
    return this.tradeArray; 
    } 

そして、ここでは、関連部分ノードサーバ自体です：

はここでノード・サーバーに接続し、私のサービスです：

[ 
    {id: 0, cust: "Ben", hasSub: true, 
     subCust: "Rigby", type: "s", security: '001', ticket: '99'}, 
    ... 
    {id: 9, cust: "Uber Bank", hasSub: true, 
      subCust: "Lil' Bank", type: "p", security: '456', ticket: '56'}, 
]; 

と場所のひとつサービスがに注入して呼び出されます。

export class SubmittedComponent { 
    constructor(private tradeService: TradeService) { } 

    //initally show all trades 
    rows = this.tradeService.getTrades(); 
... 

私は、「全体body.tradesは、」私はしたいデータの完全なリストであることをブラウザコンソールで見ることができますしかし、それは未定義に終わるtradeArrayにそれらをプッシュしないことを購読しているようだ。

ありがとうございます。

Answer 1

私はあなたがあなたのコンポーネントの1つからgetTrades（）を呼び出しているとします。この場合は、これは何が起こるかです：

リクエストが送信されます

• 要求がバックグラウンドで処理される非同期
• 要求を待機しません方法が解決されるとこの問題を回避するには、[]

あるtradeArrayの現在の値を返します、あなたは彼らがgetTradeObservable()メソッドを呼び出すように、あなたのコンポーネントをリファクタリングAN返さObservableを購読することができます。

更新：もう1つのオプションは、Subject', and expose it to your components through anを使用するサービスをリファクタリングすることです。

UPDATE：

getTradeObservable(): Observable<Trade[]> { 
    return this.http.get(this.url) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

Answer 2

：あなたは、次のアプローチ

class TestComponent { 
    data: Trade[]; 
    // inject service in component 

    getData(){ 
    this.service.getTradesObservable().subscribe(data => this.data = data); 
    } 
} 

を試してみて、にgetTradesObservableの定義を変更することができ、あなたが

export interface Trade{ 
    id: number; 
    cust: string; 
    hasSub: boolean; 
    subCust: string; 
    type: string;s 
    security: string; 
    ticket: string; 
} 

展覧

のための次の定義を持っていると仮定すると、コードのこの部分について：

以来

getTrades(): any { 
    this.getTradeObservable() 
     .subscribe(
      trade => this.tradeArray.push(trade)); 
    return this.tradeArray; 
    } 

このライン非同期です：観察できるが解決される前return this.tradeArray;が（多分）に実行されます、あなたはあなたのサービスからgetTradesメソッドを削除し、代わりにあなたのコンポーネントにgetTradeObservableによって返された観察可能なのホールドを取得してではなく、必要がありますすべてのものがあなたが望む値を返すことを期待している場合は、次のようにサブスクリプションにその値を割り当てる必要があります：

@Component({ 
     providers:[TradeService ] 
    }) 
    export class myComponent{ 
     trades:Trade[]; 
    constructor(tradeService:TradeService){ 
     tradeService.getTradeObservable().subscribe(tradeRes=>this.trades=tradeRes as Trade[]); 

    } 
}