RxJS 过滤器/搜索主题、可观察或行为主题答案

【问题标题】：RxJS Filter / Search Subject, Observable, or BehaviorSubjectRxJS 过滤器/搜索主题、可观察或行为主题
【发布时间】：2019-03-14 13:41:49
【问题描述】：

我刚开始学习 RxJS。我尝试做的一件事没有太多运气，那就是弄清楚如何搜索/过滤主题，或者创建一个我可以搜索的观察数组。

我尝试过管道和过滤 Subject 和 BehaviorSubject，但谓词中的值是 RxJS 特定的。从我在各种帖子中阅读的内容来看，方法是观察数组以使用主题。

我可以轻松拥有两个变量，一个数组和主题，然后搜索数组。但我想完成这个变量。

在 Knockout 中，可以搜索观察到的数组。

这在 RxJS 中可行吗？

提前致谢。

例子：

layers: Rx.Subject<any> = new Rx.Subject<any>();

toggleLayer (layerId, visible) {

  //find layer we need to toggle

 // How do I search the subject to get the values added in next()?

   // tried from(this.layers), pipe does not fire
    const source = of(this.layers);

    const example = source.pipe(filter((val, index) => {
   //val is subject, and only iterates once, even if more than one value in subject
      // tslint:disable-next-line:no-debugger
      debugger;
      return false;
    }));

    const sub = example.subscribe((val) => {
      // tslint:disable-next-line:no-debugger
      debugger;
    });

}

private addLayer = (layerName, layerObj, layerType) => {

  // component class is subscribed to layers subject. Update UI when layer is added
  this.layers.next({
      layerId: this.layerId,
      name: `${layerName}_${this.layerId}`,
      layerObj: layerObj,
      visible: true,
      layerType: layerType
    });

}

【问题讨论】：

不清楚您的意思，能否提供一些代码示例，其中包含您希望接收的输入和输出？
是的，但您必须搜索数组。例如subject$.map(data => data.filter(...))
from RxJS 函数接受一个数组作为输入，并返回一个 Observable，它为数组中包含的每个项目发出一次。因此，如果您真的想使用从数组开始的 Observable 进行搜索/过滤，您可以执行 from(myArray).pipe(filter(item => item.foo = 'bar'))
@OlesSavluk 我要做的是搜索主题。我们可以使用 next() 传入值，那么如何在主题内使用过滤器找到值？我想使用一个变量来做到这一点。我不想保留一个单独的数组来搜索。一个主题变量。就像淘汰赛一样。
@Picci 但问题是，我需要“观察”变化，因为我有一个组件类来监听该数组的变化，也就是主题。根据我的阅读，唯一的方法是使用主题，而不是来自（数组）的可观察对象

标签： javascript rxjs

【解决方案1】：

我不是 100% 清楚你的具体问题，但也许这个例子会对你有所帮助。

const filterSubject = new BehaviorSubject<string>('b');
const dataSubject = new BehaviorSubject<string[]>(['foo', 'bar', 'baz', 'bat']);
const dataObservable = combineLatest(filterSubject, dataSubject).pipe(
  // given an array of values in the order the observables were presented
  map(([filterVal, data]) => data.filter(d => d.indexOf(filterVal) >= 0))
);

dataObservable.subscribe(arr => console.log(arr.join(',')));
// bar, baz, bat

使用combineLatest，您可以在您的过滤器值或数据数组更改时更新dataObservable 中的值。

【讨论】：

谢谢，但我想要完成的是使用一个变量，一个主题变量，因为我需要“观察”组件类中的变化。然后，我想搜索主题中的值。就像在 Knockout 中一样，我们可以订阅一个数组，我们更新该数组，我们可以搜索该数组，而无需搜索第二个变量或第二个 observable。我试图弄清楚这在 RXJS 中是否可行。在您的示例中，您有 3 个变量。如果不使用 filterSubject，至少两个。
另外问题是，我想在更新或 next() 或事件之外搜索 dataSubject。从我一直在试验的情况来看，在向数组添加内容时将调用 combineLatest。我希望能够在需要搜索数组时调用 combineLatest。我想做的和淘汰赛 ko.utils.arrayFilter 完全一样
我对 Knockout 不熟悉（从未使用过），但我不太确定您是否不想只使用数组而不是涉及 RXJS。也许最终过滤数据的是RXJS（如filterSubject）。即使您更新了示例，我也不清楚（a）调用toggleLayer/addLayer 的顺序，（b）您希望如何过滤数据，以及（c）如何使用数据（@ 987654327@?).