Angular2,可观察服务,这是最好的做法

时间:2016-09-27 19:29:25

标签: angular observable

我有一个服务必须调用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中,list为空 我不想在子目录中包含filterList方法

最好的方法是什么?

1 个答案:

答案 0 :(得分:4)

您的问题是可观察是异步的。

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);

因此,当您致电list时,您不能指望this.filterList成为空数组。

我认为更好的方法是使用类似.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'}]);
}