Angular2，可觀察的服務，這是最佳實踐

Question

我有一個必須調用http才能獲取數據，處理這些數據並以Observable形式返回轉換后的數據的服務

 _callHttp(): Observable<Array<element>> {
    return this._http.get(this._Url).map(res => this._extractData(res));
}

_extractData(res): element[] {
       return res.json().map(t => new element().fromJson(t));
 }


getOrganigramByName(name, language): Observable<element[]> {
    let list = new Array<element>();
    this._callHttp().subscribe(res=> list.push(res));
    let filteredList: Array<element> = this.filterList(list,name, language);
    return Observable.of(filteredList);
} 


filterList(list,name,language):Array<element>{
  let result : new Array<element>();
  list.forEach(res => {
     if (res.name==="albert"){
       result.push(res);
     }
   })
   return result 

}

在方法filterList中，列表為空，我不想在訂閱者中包含filterList方法

最好的方法是什么？

Answer 1

您的問題是Observable是異步的。

let list = new Array<element>();

this._callHttp().subscribe(res=> {
    // This will happened sometimes in the futur, maybe in 5 seconds.
    list.push(res);
});

// But this will happened instantly, so list is still an empty array
let filteredList: Array<element> = this.filterList(list,name, language);

return Observable.of(filteredList);

因此，在調用this.filterList時，您不能期望list會是空數組。

我認為一種更好的方法是使用像.map或.filter這樣的函數式方法。

getOrganigramByName(name, language): Observable<element[]> {
    return this._callHttp().map(list => {
      return this.filterList(list, name, language);
    });
} 

filterList(list:element[], name, language):element[]{
  return list.filter(elem => {
    return elem.name === 'albert';
  });
}

我模擬一個你的問題plunker 。

我的_callHttp只是您的http請求和json解析的模擬。

_callHttp(): Observable<element[]> {
  return Observable.of([{name:'bob'}, {name:'john'}, {name:'albert'}]);
}