如何等待多个结果，然后根据收到的数据过滤它们？

Question

我有两个可观察的数据，我想等待两者的结果，因此我可以根据另一个来过滤一个结果。他们个人担心：

this.allValues$ = this.store.select(selectors.getAllValues)
this.myId$ = this.store.select(selectors.myId)

我可以使用异步管道将它们渲染到模板中

但是我想创建一个包含过滤数组的类属性。如果是同步JS，则类似

this.filteredResults = allValues.filter(value => value.id === myId)

zip会给我带来价值

this.filteredResults$ = zip(
  this.store.select(selectors.getAllValues),
  this.store.select(selectors.myId)
)

模板：     结果：{{filteredResults $ |异步| json}}

但是我不明白如何按照自己的意愿进行过滤。我尝试将pipe链接到zip：

.pipe(
   tap((...args) => {
     console.log({ args }) // only one result so no hope of dropping in `map` or `filter` here
   })
)

但这具有从结果集中删除allValues数组的作用。 allValues很大，因此可能需要更长的时间，而zip不再等待所有内容发出，因此我认为pipe不是解决方案，尽管看起来很接近。

我如何才能访问这两个结果集，对其进行过滤，然后将结果放入一个可以观察到的结果，我可以使用filteredResults$ | async | json在模板中进行渲染？

Answer 1

您可以使用concatMap或switchMap。

this.filteredResults = this.store.select(selectors.myId).pipe(
  concatMap(myId => {
    return this.store
      .select(selectors.getAllValues)
      .pipe(filter(value => value.id === myId));
  })
);

Answer 2

很容易忽略majority选择器。您应该检查文档，因为使用NgRx方法可以实现您想要实现的目标。这将带来多种好处（更干净的代码，可重用的选择器等）

https://ngrx.io/guide/store/selectors#using-selectors-for-multiple-pieces-of-state

这种情况在您的情况下可能适用：

createSelector

然后

export const yourCombinedSelector = createSelector(
  selectors.getAllValues,
  selectors.myId,
  (allValues, myId) => {
    // perform logic and return the data you need
  }
);

Answer 3

您可以使用forkJoin运算符。

文档： https://www.learnrxjs.io/operators/combination/forkjoin.html

示例： https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs

类似的堆栈溢出帖子：rxjs - combining inner observables after filtering

“ forkJoin（）运算符允许我们获取Observable的列表并并行执行。一旦列表中的每个Observable发出一个值，forkJoin将发出一个包含所有列表的Observable值。列表中的Observables解析的值“

欢呼