我对Angular 2和Observables的概念很新.然而,对于经验丰富的大师来说,我想要实现的目标应该相当简单:)
所以：
我有一个组件,我订阅了来自服务的observable.出于测试目的,我一直在使用数据阵列来使我的组件生效.现在,当它完成时,我想要将真正的API调用挂钩到我的服务.现在问题是我从服务器获得的数据需要在返回到组件之前进行操作.当我操纵它时,我得到错误,例如“无法读取属性’订阅’为null”
现在基本上会出现这个错误,因为在我的服务可观察中,我使用HTTP.get方法发送API请求,代码不等待其响应完成.我从服务器获得结果,但是在控制台中出现错误之后.
任何人都可以指导我如何请求HTTP调用,然后在将数据发送到已订阅服务的组件之前操纵它的数据？
这是我的组件代码：
getSearchResults(keyword,parentId?,subCatId?) {
this.subscriptionResults = this.catalogService.getSearchResults(keyword,parentId,subCatId)
.subscribe(
data => {
this.results = data.results.parts;
this.numResults = data.results.totalItemCount;
this.timeResults = data.results.processingTimeMS;
this.categories = data.categories;
this.subCategories = data.subCategories;
this.brands = data.brands;
this.suppliers = data.suppliers;
this.layoutType = data.layoutType;
this.allCategories = data.allCategories;
this.selCategoryName = data.selCategoryName;
this.selSubCategoryName = data.selSubCategoryName;
if ( this.debugMode ) {
console.log('RESULTS: ',data);
}
},error => this.errorMessage = <any>error
);
}
这是我的服务：
// Get data from server
getDataFromServer(URL: string): Observable<any> {
return this.http.get(URL).flatMap(this.extractData).catch(this.handleError);
}
getSearchResults(keyword: string,parentCatId?:number,subCatId?:number): Observable<any> {
let request = null;
let result = null;
let URL = this.API_URL + '/search?categoryId=' + subCatId + '&format=json';
request = this.getDataFromServer(URL);
request.subscribe(
() => {
// Modify result here and send it back
},error => { console.log('ERROR: ',<any>error); }
);
我想在我想要返回它之前操纵响应数据.我怎样才能做到这一点？
– 编辑 –
如果我返回一个BehaviorSubject：
return new BehaviorSubject<any>(request.subscribe(
res => { return this.processResultData(res,layoutType,keyword,parentCatId,subCatId); },err => { console.log('RETURN ERROR: ',<any>err); }
));
解决方法
您的组件正在订阅getSearchResults()的返回值,以便该函数需要返回一个Observable.你的getDataFromServer()函数返回一个observable,你可以做的就是对该返回值使用Observable.map(). Observable.map()允许您修改在可观察流中移动的值,并返回修改后的值的新observable.新的observable是您的组件想要订阅的那个,因此应该返回.
在代码中,它看起来像：
getSearchResults(keyword: string,subCatId?:number): Observable {
let request = null;
let result = null;
let URL = this.API_URL + '/search?categoryId=' + subCatId + '&format=json';
return this.getDataFromServer(URL).map(
(response) => {
// Modify response here
// Return modified response
}
).catch((error) => { console.log('ERROR: ',error); });
}
