如何映射到一个 Observable 数组中的多个对象？答案

【问题标题】：How to map to multiple objects within one Observable array?如何映射到一个 Observable 数组中的多个对象？
【发布时间】：2021-07-06 01:59:17
【问题描述】：

我正在使用 forkJoin 将两个可观察数组连接在一起：

connect(): Observable<any[]> {
this.userId = this.authService.userId;
this.habits$ = this.habitService.fetchAllById(this.userId);
this.status$ = this.statusService.fetchAll();
this.joined$ = forkJoin([this.habits$, this.status$]).pipe(
  map(([habits, statuses]) =>
    habits.map(habit => ({
      ...habit,
      status: statuses.find(s => s.habitId === habit.habitId)
    })))
);
console.log(this.joined$);

return this.joined$;

在我的映射函数中，我将每个习惯-Observable 中的 habitId 映射到我的状态-Observable 中的 habitId。

哪个工作正常。问题是，我有 我的 status$-Oberservable 中有多个对象，我想将它们 映射到一个 habitId 的一个 habitId$-Oberservable。如何做到这一点？

【问题讨论】：

标签： javascript angular typescript rxjs angular2-observables

【解决方案1】：

而不是使用find，它从数组中返回单个项目。您可以使用filter返回一个包含所有满足指定条件的项目的数组：

  map(([habits, statuses]) =>
    habits.map(habit => ({
      ...habit,
      statuses: statuses.filter(s => s.habitId === habit.habitId)
    })))

【讨论】：

【解决方案2】：

你快到了。只需使用过滤器而不是查找。 filter 一直运行到数组的末尾，并在每个项目上调用它的回调；与 find which 在找到一个之后停止。

connect(): Observable<any[]> {
this.userId = this.authService.userId;
this.habits$ = this.habitService.fetchAllById(this.userId);
this.status$ = this.statusService.fetchAll();
this.joined$ = forkJoin([this.habits$, this.status$]).pipe(
  map(([habits, statuses]) =>
    habits.map(habit => ({
      ...habit,
      status: statuses.filter(s => s.habitId === habit.habitId)
    })))
);
console.log(this.joined$);

return this.joined$;

【讨论】：