RxJs Streams - 产生单个主流的多个流答案

【问题标题】：RxJs Streams - Multiple Stream producing single master streamRxJs Streams - 产生单个主流的多个流
【发布时间】：2018-08-07 19:12:11
【问题描述】：

我有一个对象数组的主列表，然后是另外两个由数组表示的选择列表。我将这些作为 3 个流 $。

master$
filter1$
filter2$

在用户界面上， master$ 使用 angular 中的异步管道绑定到数据表。 filter1$ 和 filter2$ 绑定到 UI 下拉菜单作为过滤器选项。

在任何时候，filter1$ 和 filter$ 都可以根据用户的选择而改变。我觉得必须有一种方法可以将 3 个流组合在一起，并在需要时应用两个过滤器。我怎样才能在 RxJs 中做到这一点？你能给我举个例子吗。我可以使用 combineLatest、pipe 和 map 实现简单易读的代码吗？

更新：

以下是我目前的解决方案，很确定有更好的方法来编写这个：

combineLatest(
  master$.shareReplay(1),
  filter1$.shareReplay(1),
  filter2$.shareReplay(1)
)
  .map(([master, filter1, filter2]) => {
    let filtered = master;
    if (filter1.length > 0) {
      filtered = [];
      filtered = master.filter(each => filter2.indexOf(each.organizationId) !== -1);
    }
    if (filter1.length > 0) {
      master = filtered;
      filtered = [];
      filtered = master.filter(each => filter2.indexOf(each.organizationId) !== -1);
    }
    return filtered;
  })
  .subscribe(final => {
    this.list = final;
  });

}

【问题讨论】：

标签： typescript angular5 rxjs5

【解决方案1】：

你可以通过一些抽象来简化它：

/* my.component.ts */

@Component(/* ... */)
export class MyComponent {
    /* ... */
    public mySub: Subscription = Observable.combineLatest(master$, filter1$, filter2$)
        .map((valueLists) => valueLists.filter((val) => val && val.length > 0))
        .map((valueLists) => ArrayUtils.intersection(...valueLists))
        .subscribe(final => this.list = final);
}


/* array.utils.ts */

export class ArrayUtils {
    public static intersection(...arrays: any[]): any[] {
        const result = [];
        /* Intersection logic... */
        return result;
    }
}

也可以从其他来源获取交集逻辑，例如 lodash 库。

【讨论】：