Angular и Firestore: как объединить данные, используя наблюдаемые?

Question

Я пытаюсь прочитать документ профиля с помощью valueChanges и объединить его с данными сеанса, но когда я использую forEach, возвращаемая наблюдаемая становится пустой (я новичок в обеих технологиях).

Приведенный ниже код возвращает профиль, как и ожидалось.

getProfileData() {
    return this.authService.user$.
        pipe(switchMap(user => { 
        return this.fstore.collection('profiles').
        doc(user.uid).valueChanges();}));}

Приведенный ниже код возвращает NULL наблюдаемому.

  getProfileData() {
    return this.authService.user$.pipe(
      switchMap(user => {
        return this.fstore
          .collection('profiles').doc(user.uid)
          .valueChanges().forEach((p: Profile) => ({uid: user.uid, bio: p.bio}));
      })
    );
  }

Componente ngOnInit

ngOnInit() {
    this.profile$ = this.uservice.getProfileData();
}

Answer 1

.valueChanges Firestore возвращает наблюдаемую, так что вы можете сопоставить свои пользовательские данные с объектом firestore, используя другой канал.

getProfileData() {
    return this.authService.user$.pipe(
      switchMap(user => this.mergeUserAndProfile(user)),
    );
  }

mergeUserAndProfile(user): Observable<any> {
  return this.fstore
  .collection('profiles')
  .doc(user.uid)
  .valueChanges()
  .pipe(
     map((p: profile) => {
       // Add user properties to profile
       p.uid = user.uid;
       return p
     })
  )
}

Answer 2

Я рекомендую вам использовать еще один канал и вместо него использовать оператор "map":

getProfileData() {
    return this.authService.user$.pipe(
        switchMap(user => {
            return this.fstore
            .collection('profiles').doc(user.uid).valueChanges().pipe(
                map((p: Profile) => {
                    return {uid: user.uid, bio: p.bio}
                })
            );
        })
    );
}

Не забудьте импортировать оператор карты из операторов rx js.