如何使用 observable 的输出来过滤另一个

Posted 2023-03-13

【中文标题】如何使用 observable 的输出来过滤另一个

【英文标题】：How to use the output of an observable to filter another

【发布时间】：2017-05-11 15:12:19

【问题描述】：

所以我有两个 observable，一个返回当前类别，另一个返回产品。我希望根据类别过滤产品。

这是在 Angular 2 中，所以我真的希望我的 ng2-view 成为订阅者（通过异步管道）。

类似这个简单的例子：

let category$ = Observable.of(id: 1);
let products$ = Observable.from([name: 'will be included', cat_ids: [1, 5], name: 'nope', cat_ids: [2, 3], name: 'also yep', cat_ids: [1, 7]]);

return products$
  .toArray()
  .filter(prod => 
    return prod.cat_id.some(id => id === <how do I get the value of the category observable here?>)
  );

也许答案很简单，但我想不通。

【参考方案1】：

您需要加入这两个流，例如combineLatest:

let category$ = Observable.of(id: 1);
let products$ = Observable.from([name: 'will be included', cat_ids: [1, 5], name: 'nope', cat_ids: [2, 3], name: 'also yep', cat_ids: [1, 7]]);

return Observable.combineLatest(products$, category$)
  .map(([products, category]) => 
    return products.filter(prod => prod.cat_id.some(id => id === category.id);
  );

更新

正如@olsn 在Observable.from 中指出的那样，您得到的是事件流而不是事件数组流。因此解决方案应该是：

let category$ = Observable.of(id: 1);
let products$ = Observable.from([name: 'will be included', cat_ids: [1, 5], name: 'nope', cat_ids: [2, 3], name: 'also yep', cat_ids: [1, 7]]);

return Observable.combineLatest(products$, category$)
  .filter(([product, category]) => 
    return product.cat_id.some(id => id === category.id);
  )
  .map(([product, category]) => product);

【讨论】：

以防万一其他人遇到此解决方案：products$ 正在使用Observable.from -> 所以products 将不是是一个数组，而是一个对象，因此代码将因products.filter is not a function

而失败

Observable.from 接受 rxjs 5 中的数组。所以我认为代码可以工作。

啊，我明白你的意思了。如果需要，您可以将 toArray() 运算符放在中间以使其成为数组。

@DarkNeuron，是的，你可以。您也可以使用of 代替from。但在这两种情况下，你都会得到数组流。这可能是不可取的。