rxjs 过滤可观察的对象数组答案

【问题标题】：rxjs Filter an array of objects observablerxjs 过滤可观察的对象数组
【发布时间】：2018-11-23 10:44:03
【问题描述】：

我现在有这段代码可以过滤一个 observable。

listings$: Observable<Listing[]>;

this.listings$ = this.firestore
      .getListings()
      .pipe(map(listings => listings.filter(listing => listing.promoted === true)));

效果很好，但我想充分利用 rxjs 而不是在数组上使用filter。

this.firestore.getListings() 函数返回Observable<Listing[]>，this.listings$ 也必须是Observable<Listing[]>。

我尝试了不同的方法，并为此苦苦挣扎了一段时间。也许你可以帮助我。我对 Angular 和 rxjs 仍然“新鲜”。

this.listings$ = this.firestore.getListings().pipe(
      mergeMap(listings => listings),
      filter(listing => listing.promoted === true)
    );

类型 Observable<Listing> 不可分配给类型 Observable<Listing[]>。

我可能对 mergeMap 运算符做错了，甚至在这种情况下使用的运算符也不正确。

我尝试从this 帖子中调整代码。 flatMap 运算符似乎更改为 mergeMap。但是还是不行。

【问题讨论】：

使用 rxjs 映射和数组过滤器绝对是正确的做法。不要特意去改变它。
看起来错误是由给this.listings$的类型引起的。在显示的代码之外，您必须调整代码以匹配单个列表对象的可观察流。我猜那个表格更方便你查看？
@eric99 我没有在帖子中添加这部分代码。但它是listings$: Observable<Listing[]>;
感谢您提供的信息。那么，您究竟为什么要尝试使 observable 变平呢？

标签： angular rxjs

【解决方案1】：

嗯，这取决于你想如何使用this.listings$ Observable。使用mergeMap(listings => listings) 是正确的，它会将Observable<Listing[]> 转换为Observable<Listing>，但你说你想使用RxJS filter() 运算符并且你想在最后使用Observable<Listing[]>。

一种方法是使用take(1) 和toArray() 运算符。 toArray() 会将其源的所有发射累积到一个数组中，当源竞争时，它会发射该数组。

this.listings$ = this.firestore.getListings().pipe(
  take(1),
  mergeMap(listings => listings),
  filter(listing => listing.promoted === true),
  toArray(),
);

请注意，这个 listings$ Observable 只会发射一次，并且不会对 this.firestore.getListings() 的任何后续发射做出反应。

就我个人而言，我实际上会使用您拥有的 pipe(map(listings => listings.filter(...)))，因为它更易于使用。

【讨论】：

谢谢。 this.listings$ 是 Observable<Listing[]>，所以我可以订阅它并在添加列表时显示列表，所以 take(1) 不是我想要的。我会将您的答案标记为已接受，因为您实际上涵盖的内容超出了我预期有人会回答的范围。