Question

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

master$
filter1$
filter2$

在用户界面上， master $ is使用角度中的异步管道绑定到数据表。 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;
  });

}

Answer 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库。

RxJs Streams - 生成单个主流的多个流

1 个答案: