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＆＃39;是我想要的数据的完整列表，但似乎订阅并没有将它们推入tradeArray，最终未定义。

感谢您的时间。

Answer 1

所以我想你是从你的一个组件调用getTrades（）。如果是这种情况，将会发生这种情况：

请求将被发送
请求将在后台异步处理
该方法不会等待请求被解析，并将返回tradeArray的当前值，即[]

为避免这种情况，您可以重构组件，以便他们调用getTradeObservable()方法订阅返回的Observable。

更新：另一个选择是重构你的服务以使用Subject', and expose it to your components through an Observable`。

更新：假设您有以下贸易定义

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;将（可能）在解析observable之前执行，你应该从你的服务中删除getTrades方法，而是保持observable在您的组件中由getTradeObservable返回，而不是期望整个事情返回您想要的值，您应该在订阅中分配该值，如下所示：

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

    }
}

使用Angular Observers通过网络获取数据

2 个答案: