angular - 在返回 observable 之前操作数据

Question

我对 Angular 2 和 Observables 的概念还很陌生。然而，对于经验丰富的大师来说，我想要实现的目标应该相当简单 :)

所以:我有一个组件，其中我订阅 来自服务的可观察对象。出于测试目的，我一直在使用数据数组来使我的组件生效。现在完成后，我想将真正的 API 调用挂接到我的服务。现在的问题是我从服务器获取的数据在返回到组件之前需要进行处理。当我操作它时，出现错误，例如“无法读取 null 的属性‘subscribe’”

现在基本上会出现此错误，因为在我的可观察服务中，我使用 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); }
        ));

我在我的组件中获得订阅对象(这是我不需要的)。相反，我需要订阅中的数据。

Answer 1

您的组件正在订阅 getSearchResults() 的返回值，因此该函数需要返回一个 Observable。您的 getDataFromServer() 函数返回一个可观察对象，因此您可以对返回值使用 Observable.map()。 Observable.map() 允许您修改通过可观察流的值，并返回修改值的新可观察值。新的可观察对象是您的组件想要订阅的对象，因此应该返回它。

在代码中，它看起来像:

getSearchResults(keyword: string, parentCatId?:number, 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() 的修改后的响应。