使用角度觀察者通過網絡獲取數據

Question

我正在開發一個Angular應用程序，其中包含用戶可以添加到的（金融）交易列表。這一直進展良好，我試圖從服務提供的靜態列表切換到嘗試從本地Node.js服務器獲取數據。我使用觀察者異步獲取交易列表。

我一直在關注Angular的HTTP tutorial和相關的plunker。但是，儘管我可以看到來自服務器的數據，但我無法使用.subscribe（）方法從中獲取一組有用的數據。

這裏是我的服務，連接到節點服務器：

@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; 
    } 

這裏是相關的部分節點服務器本身：

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預期輸出的：

[ 
    {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

所以我想你是從你的一個組件調用getTrades（）。如果是這種情況，這是會發生什麼：

• 的請求將被髮送
• 請求將在後臺處理異步
• 的方法不會等待請求解決，將返回tradeArray的電流值，這是[]

爲了避免這種情況，你可以讓他們調用getTradeObservable()方法的訂閱返回Observable重構你的組件。

更新：另一種選擇是重構你的服務使用Subject', and expose it to your components through an Observable`。

UPDATE：假設你有貿易

如下定義

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

你可以試試下面的辦法

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

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

而且getTradesObservable的定義修改爲：

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

Answer 2

談到這部分代碼：

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

因爲getTradeObservable是異步的這條線：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[]); 

    } 
}