javascript - 基于过滤器 RxJS 的不同管道

Question

我有以下问题。我想使用 Angular 中的异步管道订阅一个可观察对象。但是管道中的数据可能来自不同的数据源，并且管道的外观可能因数据源而异。

它现在的实现方式不起作用，因为我覆盖了 this.data$ 的第一个值，因此源 A 永远不会被订阅。

是否可以根据过滤器“拆分”管道？

problem.component.ts:

// Data source A and logic A 
this.data$ = this.service.context.pipe(
  filter(context => context.flag === true),
  switchMap(context => this.dataSourceA(context.id))
  map(data => this.processDataA(data))
);

// Data source B and logic B 
this.data$ = this.service.context.pipe(
  filter(context => context.flag === false),
  switchMap(context => this.dataSourceB(context.id))
  map(data => this.processDataB(data))
);

problem.component.html

<pro-table [data]="data$ | async"></pro-table>

Answer 1

将逻辑移至您的 switchMap()

this.data$ = this.service.context.pipe(
   switchMap(context => context.flag
      ? this.dataSourceA(context.id).pipe(map(d => this.processDataA(d)))
      : this.dataSourceB(context.id).pipe(map(d => this.processDataB(d)))
   )
);