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

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$ observable，如下所示

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

Answer 1

我认为您只对 observable 感兴趣，所以我建议您订阅 fetchData 方法。然后您可以映射该响应。例如：

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

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

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$ observables 以及模板文件中的 async 管道来显示相应的数据。

Answer 3

您可以使用 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 调用。

更好的解决方案是将智能/转储架构与异步管道结合使用：

父组件：

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>

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

Map result from api to observables

angular

rxjs

async-pipe