0

我正在尝试使用 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>
4

3 回答 3

3

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

快速的解决方案是将每个 observable 映射到想要的信息：

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>
于 2020-06-22T15:55:04.410 回答
1

您可以使用 rxjsmap运算符来实现您所需要的，如下所示：

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管道来显示相应的数据。

于 2020-06-22T15:48:02.937 回答
0

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

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

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

于 2020-06-22T15:43:18.637 回答