angular – 在返回observable之前处理数据

发布时间：2020-12-17 06:53:29 所属栏目：安全来源：网络整理

导读：我对Angular 2和Observables的概念很新.然而,对于经验丰富的大师来说,我想要实现的目标应该相当简单:) 所以：我有一个组件,我订阅了来自服务的observable.出于测试目的,我一直在使用数据阵列来使我的组件生效.现在,当它完成时,我想要将真正的API调用挂钩到

我对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); });
}

当您的组件订阅时,它应该看到来自.map()的修改后的响应.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!