Angular 在返回可观察数据之前操作数据

我对角度2和可观测的概念很陌生。然而，对于经验丰富的大师来说，我试图实现的目标应该相当简单：）

因此： 我有一个组件，其中订阅了来自服务的可观察到的内容。出于测试目的，我一直在使用数据阵列使我的组件处于活动状态。现在，当它完成后，我想把真正的API调用挂接到我的服务上。现在的问题是，我从服务器获取的数据需要在返回到组件之前进行处理。当我对它进行操作时，会出现错误，例如“无法读取null的属性'subscribe'”

现在，基本上这个错误来了，因为在我的ServiceObservable中，我使用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
        );
}

getSearchResults（关键字、parentId？、subCatId？）{
this.subscriptionResults=this.catalogService.getSearchResults（关键字、parentId、subCatId）
.订阅(
数据=>{
this.results=data.results.parts；
this.numResults=data.results.totalItemCount；
this.timeResults=data.results.processingtimes；
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=错误
);
}

这是我的服务：

// 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); }
    );

//从服务器获取数据
getDataFromServer（URL:string）：可观察{
返回this.http.get（URL）.flatMap（this.extractData）.catch（this.handleError）；
}
getSearchResults（关键字：string，parentCatId？：number，subCatId？：number）：可观察{
让请求=null；
设result=null；
让URL=this.API_URL+'/search？categoryId='+subCatId+'&format=json'；
请求=this.getDataFromServer（URL）；
请求。订阅(
() => { 
//在此处修改结果并将其发送回
},
error=>{console.log（'error:'，error）；}
);

我想在返回响应数据之前对其进行操作。我该怎么做

--编辑-- 如果我返回行为主体：

return new BehaviorSubject<any>(request.subscribe(
            res => { return this.processResultData(res, layoutType, keyword, parentCatId, subCatId); },
            err => { console.log('RETURN ERROR: ', <any>err); }
        ));

返回新的行为主体（request.subject(
res=>{返回this.processResultData（res，layoutType，关键字，parentCatId，subCatId）；}，
err=>{console.log（'returnerror:'，err）；}
));

---

我在我的组件中获取subscription对象（这是我不需要的）。相反，我需要订阅中的数据。

您的组件正在订阅来自

getSearchResults（）

的返回值，因此函数需要返回一个可观察的。您的

getDataFromServer（）

函数返回一个可观测值，所以您可以对该返回值使用

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); }); } getSearchResults（关键字：string，parentCatId？：number，subCatId？：number）：可观察{ 让请求=null； 设result=null； 让URL=this.API_URL+'/search？categoryId='+subCatId+'&format=json'； 返回此.getDataFromServer（URL）.map( （回应）=>{ //在此处修改响应 //返回修改响应 } ).catch（（error）=>{console.log（'error:'，error）；}）； }

---

当您的组件订阅时，除了可接受的答案之外，还应该看到来自

.map（）

的修改响应，因为pipable操作符（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))
  );

---

谢谢！@Alex它确实可以使用

.map

方法。有趣的是，我以前尝试过它，但由于某种原因，我得到了一个

未定义的

错误。但是有一件事现在不起作用。我得到的数据在同一个组件中正确显示。但是，我发送给其他组件的部分数据一直显示“正在加载…”我需要触发一些事件，以便他们拾取新值？（我认为这将是自动的）以澄清-我得到一个对象“类别”，我将其传递给子组件以显示。它没有检测到更改。我尝试使用

async

管道，但也没有帮助。啊-抱歉，没关系。结果是[input]我发送的数据被复制到

ngOnInit

lifecyclehook中的另一个值，因此更改没有更新。