map 兩個 Oberservable arrays 如何基於一個值？

Question

我有兩個可觀察的 arrays。

habits$: Observable<Habit[]>;
status$: Observable<Status[]>;

該習慣具有以下結構：

export interface Habit {
  habitId: number;
  name: string;
  repeatVal: number;
  notification: string;
  color: string;
  question: string;
  id: number;
}

狀態數組有 habitId、日期和狀態作為鍵。

我想根據兩者中存在的habitId 屬性將habits$ 和status$ 合並到一個Observable 數組中。

我已經做了一些研究，mergeMap() 和 forkJoin() 的組合似乎是通往 go 的方法，如下所示將多個可觀察的 arrays 組合成新的 ZA8CFDE6331BD59EB2AC96F8911C4B6 數組

但我想不出適合我的語法。

這就是我的代碼目前的樣子：

ngOnInit() {
this.habits$ = this.habitService.fetchAllById(this.authService.userId);
console.log(this.habits$);
this.status$ = this.statusService.fetchAll();
this.habits$.pipe(
  mergeMap(habits => {
  this.status$ = this.statusService.fetchAll().filter(status => status.habitId == habits.habitId);
}));
console.log(this.joined$);}

Answer 1

我會以下列方式使用 forkJoin：

ngOnInit() {
  forkJoin([
    this.habitService.fetchAllById(this.authService.userId),
    this.status$ = this.statusService.fetchAll()
  ]).subscribe(([habits, statuses]) => {
    this.joined = habits.map(habit => ({
      ...statuses.find(t => t.habitId === habit.habitId),
      ...habit 
    }));
  });
}

看簡單的演示