Angular2，观察到的服务，这是最好的做法

我有必须调用HTTP来获取数据的服务，这些数据进行处理并返回可观察Angular2，观察到的服务，这是最好的做法

_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 ，列表为空我不想在subcribe中包含filterList方法

要做到这一点的最佳方法是什么？

来源

2016-09-27 Florence

*一些elment字段用作element.name *：这是什么意思？代码是什么？ –

元素是一个类。导出类元素{name：string，lastname：string，...}，因此我想访问element.name – Florence

在'getOrganigramByName'函数中，您定义了'list'，将其绑定到'subscribe'回调中，但它看起来像就像你从不使用它。没有任何创造它的意义何在？ ^^ –

您的问题是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);

所以你不能指望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'}]); 
}

来源

2016-09-27 21:05:07

Angular2，观察到的服务，这是最好的做法

回答

相关问题