Question

我正在尝试使用Rxjs映射来自API的响应，如下所示

在使用中，我有以下

export interface Response {
  data: Array<Data>;
  headers: Headers
}

public fetchData(): Observable<Response> {
   return http.get<Response>(myurl);
}

在我的组件中，我想将响应映射到以下可观察对象

headers$: Observable<Headers>;
data$: Observable<Array<Data>>;

onInit(){
   myservice.fetchData()
     .pipe(
        //mapping response to the two observables here
     )
}

这样我就可以使用模板中的异步管道将我的data$绑定为如下

<div *ngIf="let item of data$ | async">
   {{ Whatever }}
</div>

Answer 1

您可以使用rxjs运算符来操纵流，但是在这种情况下，您需要使用给定的流来初始化可观察对象。

快速的解决方案是将每个可观察到的信息映射到所需的信息：

headers$: Observable<Headers>;
data$: Observable<Array<Data>>;

onInit(){
  this.headers$ = this.myService.fetchData().pipe(stream => stream.headers);
  this.data$ = this.myService.fetchData().pipe(stream => stream.data)

}

但这意味着您每次渲染组件时都会进行两个http调用。

更好的解决方案是将Smart / Dump体系结构与异步管道结合使用：

父组件：

response$: Observable<Response>;

onInit(){
  this.response$ = this.myService.fetchData();

}

父模板：

<ng-container *ngIf="response$ | async as response"
  <app-child [response]="response"></app-child>
</ng-container>

子组件：

@Input() response: Response

子模板：

<div *ngFor="let item of response.data">
   {{ Whatever }}
</div>

Answer 2

您可以使用rxjs map运算符来实现所需的功能，如下所示：

headers$: Observable<Headers>;
data$: Observable<Array<Data>>;

onInit(){
   const response = this.myservice.fetchData();
   this.headers$ = response.pipe(map(resp => resp.headers));
   this.data$ = response.pipe(map(resp => resp.data));
}

现在，您可以在模板文件中使用data$和header$观察对象以及async管道来显示相应的数据。

Answer 3

我认为您仅对可观察对象感兴趣，因此建议您订阅fetchData方法。然后您可以映射该响应。例如：

myservice.fetchData().subscribe(
      (data)=>{
        //Map your response here  
      }
    )

另一种选择是，您可以在fetchData方法中进行映射，而不是在组件中进行映射。

将结果从api映射到可观察对象

3 个答案: