Question

我对Angular 2和Observables的概念很新。然而，对于有经验的大师来说，我想要实现的目标应该相当简单：）

所以：我有一个组件，其中subscribed来自服务的observable。出于测试目的，我一直在使用数据阵列来使我的组件生效。现在，当它完成时，我想要将真正的API调用挂钩到我的服务。现在问题是我从服务器获得的数据需要在返回到组件之前进行操作。当我操纵它时，我会收到错误，例如＆＃34;无法读取属性＆＃39;订阅＆＃39; of null＆＃34;

现在基本上会出现这个错误，因为在我的服务可观察中，我使用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，因此您可以对该返回值使用Observable.map()。 Observable.map（）允许您修改在可观察流中移动的值，并返回修改后的值的新observable。新的observable是你的组件想要订阅的那个，因此应该返回。

在代码中，它看起来像：

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()的修改后的响应。

Answer 2

除了可接受的答案外，由于可插值运算符（RxJs v5.5）应该写为

import { map, catchError } from 'rxjs/operators';

然后

  return this.getDataFromServer(URL).pipe(
      map((response) => {
        // Modify response here
      }),
      catchError(error => console.log('ERROR: ', error))
  );

在返回可观察的

2 个答案: