使用来自另一个 observable 的值过滤一个 observable

Question

我有两个可观察的：

1. 表示复选框输入列表的 observable。
2. 表示来自服务器的事件流的 observable。

我想使用第一个中的值过滤第二个 observable。

从服务器接收的值包括一个tag属性，它对应于复选框列表中的值。 由以上两者组合产生的可观察量只会从其tag属性包含在勾选复选框集中的服务器中产生值。

Answer 1

您可以使用withLatestFrom 。 .

source.withLatestFrom(checkboxes, (data, checkbox) => ({data, checkbox}))
  .filter(({data, checkbox}) => ...)

在这里， checkboxes是一个 observable，表示一个复选框输入列表。 source是一个 observable，表示来自服务器的事件流。 在过滤器功能中，您可以检查数据与复选框设置相比是否有效并让它通过。

请注意，重要的是checkboxes在流可以发出任何内容之前发出至少 1 个值。

附言。 关于其他答案，即使源是冷的，该解决方案也能工作。

Answer 2

为了使用流 B 的值过滤流 A，您需要观察流 B 并使用最新值过滤流 A。

使用switch()将 B observable 转换为从 A observable 产生值的 observable。

checkedInputValuesSource
    .map(function (options) {
        return dataSource
            .filter(function (value) {
                return options.indexOf(value) !== -1;
            });
    })
    .switch()
    .subscribe(function (x) {
        console.log('out: ' + x);
    });

使用switch()假设dataSource是一个热门的 observable 。

使用interval()生成虚拟数据的示例：

 var input, checkedInputValuesSource, dataSource; input = document.querySelectorAll('input'); // Generate source describing the current filter. checkedInputValuesSource = Rx.Observable .fromEvent(input, 'change') .map(function () { var inputs = document.querySelectorAll('input'), checkedInputValues = []; [].forEach.call(inputs, function (e) { if (e.checked) { checkedInputValues.push(e.value); } }); return checkedInputValues; }) .startWith([]); // Generate random data source (hot). dataSource = Rx.Observable .interval(500) .map(function () { var options = ['a', 'b', 'c']; return options[Math.floor(Math.floor(Math.random() * options.length))]; }) .do(function (x) { console.log('in: ' + x); }) .share(); checkedInputValuesSource .map(function (options) { return dataSource .filter(function (value) { return options.indexOf(value) !== -1; }); }) .switch() .subscribe(function (x) { console.log('out: ' + x); });

 <script src='https://rawgit.com/Reactive-Extensions/RxJS/v.2.5.3/dist/rx.all.js'></script> <input type='checkbox' value='a'> <input type='checkbox' value='b'> <input type='checkbox' value='c'>

此示例将产生类似于以下内容的输出：

in: c
in: a
out: a
in: b
in: c
out: a
in: b
in: a

其中in反映了所有生成的输入，而b是通过过滤器的数据。 通过检查反映值“a”、“b”和“c”的复选框输入来调整过滤器。

Answer 3

显然，我需要的是select 、 filter和switchLatest的组合。 我写了一个小测试用例来证明这一点： https : //gist.github.com/igstan/d5b8db7b43f49dd87382#file-observable-filter-observable-js-L36-L45

Answer 4

扩展@Dorus 的答案...在 Kotlin 中，您可以这样做：

val observable: Observable<Data> = ...
val filter: Observable<Checkbox> = ...
val filtered: Observable<Data> =
        observable.filterWithLatestFrom(filter) { checkbox -> checkbox.isSelected }

使用扩展功能：

/**
 * Return an [Observable] with type [T1] that is filtered using the last event emitted by the [other] observable.
 */
fun <T1 : Any, T2 : Any> Observable<T1>.filterWithLatestFrom(other: Observable<T2>, filterFunction: (T2) -> Boolean)
: Observable<T1> {
    return this.withLatestFrom(other) { obs1, obs2 -> Pair(obs1, obs2) }
        .filter { (_, obs2) -> filterFunction.invoke(obs2) }
        .map { (obs1, _) -> obs1}
}