比较2可观察到的不同结构

Question

我有2个可观察到的东西，它们是来自Firebase的angularfire并使用rxjs

private boatsCollection: AngularFirestoreCollection<Boat>;
boats: Observable<Boat[]>;

private bookingsCollection: AngularFirestoreCollection<Booking>;
bookings: Observable<Booking[]>;

结构没有前进，但是bookings收集文档中的ID'S包含有关boat的信息（因此船id）

我要过滤船，只保留id 与

如何使用rxjs做到这一点？

ID

Answer 1

有多种方法可以做到这一点。一种方法是使用RxJS combineLatest函数同时从两个可观察对象获取通知，并使用Array filter和includes函数对数组进行过滤。

尝试以下

ngOnInit() {
  combineLatest(this.boats, this.bookings).subscribe(
    ([boats, bookings]) => {
      const bookingIds = bookings.map(booking => booking.id);
      this.filteredBoats = boats.filter(boat => !(bookingIds.includes(boat.id)));
      console.log(this.filteredBoats);    // <-- correct
    },
    error => { }
  );

  console.log(this.filteredBoats);    // <-- wrong - will print undefined/previous value
}

现在combineLatest将针对其源可观察物的每次发射而发射。同样，所有源可观察物至少应发出一次。

您可以根据需要使用RxJS zip或forkJoin函数。尽管请记住，forkJoin仅在所有源可观测值完成时才会发出。

更新：异步数据

filteredBoats是异步分配的。这意味着到console.log在订阅之外执行时，filteredBoats还没有任何值。 console.log应该在订阅中。

有关异步数据here的更多信息。