映射 Angular 订阅以同步执行

Question

我正在尝试映射一个新数组，但需要等到订阅完成后才能返回值。这样做的正确方法是什么？我可以将这些转换为承诺吗？怎么样？

this.firebaseService.getPolls().pipe(first()).subscribe((fetchedPolls:any) => {
      this.polls = fetchedPolls.filter(poll => poll.payload.doc.id == this.pollKey)
      this.pollKey = this.polls[0].payload.doc.id;
      this.firebaseService.getPollVotes(this.pollKey).subscribe((fetchedPollVotes:any) => {
        this.pollVotes = fetchedPollVotes.map((poll:any) => {
          let userKey = poll.payload.doc.get('user');
          let choiceKey = poll.payload.doc.get('choice');
          let username;
          let players;
          this.firebaseService.getUser(userKey).pipe(first()).subscribe((user:any) => {
            username = user.payload.get('username');
          });
          this.firebaseService.getChoice(choiceKey).pipe(first()).subscribe((choice:any) => {
            players = choice.payload.get('players');
          });
          return { username: username, choice: players }
        })
      });
    });

firebase.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { map, switchMap, first } from 'rxjs/operators';
import { Observable, from } from 'rxjs';
import * as firebase from 'firebase';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  // Source: https://github.com/AngularTemplates/angular-firebase-crud/blob/master/src/app/services/firebase.service.ts
  constructor(public db: AngularFirestore, private afAuth: AngularFireAuth) { }

  getPolls() {
    return this.db.collection('polls', ref => ref.orderBy('createdAt', 'desc')).snapshotChanges();
  }
  getPollVotes(pollKey) {
    return this.db.collection('votes', ref => ref.where('poll', '==', pollKey).orderBy('createdAt', 'desc')).snapshotChanges();
  }
  getUser(userKey) {
    return this.db.collection('users').doc(userKey).snapshotChanges();
  }
  getChoice(choiceKey) {
    return this.db.collection('choices').doc(choiceKey).snapshotChanges();
  }
}

** 更新 ***

我尝试关注，但 this.pollVotes 未定义。此外，重要的是我要保持 this.firebaseService.getPollVotes 的订阅有效，因为每次创建新投票时我都需要更新它。

this.firebaseService.getPolls().pipe(first()).toPromise().then((fetchedPolls:any) => {
  this.polls = fetchedPolls.filter(poll => poll.payload.doc.id == this.pollKey)
  this.pollKey = this.polls[0].payload.doc.id;
}).then(() => {
  this.firebaseService.getPollVotes(this.pollKey).subscribe((fetchedPollVotes:any) => {
    this.pollVotes = fetchedPollVotes.map((poll:any) => {
      let userKey = poll.payload.doc.get('user');
      let choiceKey = poll.payload.doc.get('choice');
      let getUserObservable = this.firebaseService.getUser(userKey).pipe(catchError((err, caught) => of([])));
      let getChoiceObservable = this.firebaseService.getChoice(choiceKey).pipe(catchError((err, caught) => of([])));
      forkJoin([getUserObservable, getChoiceObservable])
         .subscribe((results:any) => {
        // results[0], results[1], result[2], result[3] is our response from services
        console.log(results);
        return { username: results[0].payload.get('username'), choice: results[1].payload.get('players')}
      });
    });
  });
  console.log("results", this.pollVotes);
});

}

** 另一个更新 **

我稍微重新安排了函数，现在我在 this.pollVotes 数组中获得了两个条目，但是该数组对这两个值都返回 undefined，因为 forkJoin 上的订阅永远不会被命中。换句话说，我的两个控制台日志语句永远不会注销。

this.firebaseService.getPolls().pipe(first()).subscribe((fetchedPolls:any) => {
      this.polls = fetchedPolls.filter(poll => poll.payload.doc.id == this.pollKey)
      this.pollKey = this.polls[0].payload.doc.id;
      this.firebaseService.getPollVotes(this.pollKey).subscribe((fetchedPollVotes:any) => {
        this.pollVotes = fetchedPollVotes.map((poll:any) => {
          let userKey = poll.payload.doc.get('user');
          let choiceKey = poll.payload.doc.get('choice');
          let getUserObservable = this.firebaseService.getUser(userKey).pipe(catchError((err, caught) => of([])));
          let getChoiceObservable = this.firebaseService.getChoice(choiceKey).pipe(catchError((err, caught) => of([])));
          forkJoin([getUserObservable, getChoiceObservable])
             .subscribe((results:any) => {
            // results[0], results[1], result[2], result[3] is our response from services
            console.log("username", results[0].payload.get('username'));
            console.log("players", results[1].payload.get('players'));
            return { username: results[0].payload.get('username'), choice: results[1].payload.get('players')}
          });
        });
        console.log("results", this.pollVotes);
      });
    });

Answer 1

您可以使用rxjs-forkjoin 来实现此目的。这是您的案例的小例子，

  let getPollsObservable = this.fireBaseService.getPolls().pipe(catchError((err, caught) => of([])));
  let getPollVotesObservable = this.fireBaseService.getPollVotes(pollKey).pipe(catchError((err, caught) => of([])));
  let getUserObservable = this.fireBaseService.getUser(userKey).pipe(catchError((err, caught) => of([])));
  let getChoiceObservable = this.fireBaseService.getChoice(choiceKey).pipe(catchError((err, caught) => of([])));

  this.getServiceSubscription = forkJoin([getPollsObservable, getPollVotesObservable, getUserObservable, getChoiceObservable])
     .subscribe(results => {
    // results[0], results[1], result[2], result[3] is our response from services
    console.log(result);
  });

Answer 2

通过以下方式解决：

ngOnInit() {
    this.getPollData();
  }

  async getPollData() {
    let fetchedPolls = await this.firebaseService
      .getPolls()
      .pipe(first())
      .toPromise();
    this.polls = fetchedPolls.filter(
      poll => poll.payload.doc.id == this.pollKey
    );
    this.pollKey = this.polls[0].payload.doc.id;
    this.getPollVotesData();
  }
  async getPollVotesData() {
    try {
      let getPollVotesProc = this.firebaseService
        .getPollVotes(this.pollKey)
        .pipe(first())
        .toPromise();
      let fetchedPollVotes = await getPollVotesProc;
      fetchedPollVotes.map(async (poll: any) => {
        let userKey = poll.payload.doc.get("user");
        let choiceKey = poll.payload.doc.get("choice");
        let username;
        let players;
        let user = await this.firebaseService
          .getUser(userKey)
          .pipe(first())
          .toPromise();
        let choice = await this.firebaseService
          .getChoice(choiceKey)
          .pipe(first())
          .toPromise();

        players = choice.payload.get("players");
        username = user.payload.get("username");
        this.pollVotes.push({ username: username, choice: players });
        return { username: username, choice: players };
      });
    } catch (error) {
      console.log(error);
    }
  }