将结果从 api 映射到 observables

Question

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

在服务中我有以下内容

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

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

在我的组件中，我想将响应映射到以下 observables

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

您可以使用 rxjs 运算符操作流，但在您的情况下，您需要使用给定的流初始化您的 observables。

快速的解决方案是将每个可观察对象映射到想要的信息：

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

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

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

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