如何等待来自 google-cloud-firestore 的一系列 observables答案

【问题标题】：How to wait for array of observables from google-cloud-firestore如何等待来自 google-cloud-firestore 的一系列 observables
【发布时间】：2019-11-20 13:52:25
【问题描述】：

我们正在构建一个应用程序，用户可以在其中创建自己的目标，或者管理员可以创建目标并将其分配给用户或用户组。

考虑到他们创建的目标，我们正在尝试显示在我们的应用程序中创建特定目标的用户的用户名。每个目标都有一个字段，用于存储创建该目标的用户的用户 ID。为了做到这一点，我们尝试将 userIds 和 usernames 映射到一个数组中，但是，firestore 将数据作为 observable 返回。由于某种原因，该函数在将数据库中的信息添加到 subscribe 函数之前返回一组空的用户名。

Goals Table with blank createdBy

我们尝试将数据库中的信息转换为 Promise，然后再将其添加到我们的应用程序，但该代码无法运行。
我们也尝试在订阅 observable 后等待数据，但代码最终在 subscribe 函数中的代码执行之前返回。

 async getUserNames(userIds: Array<string>) {
    const usersCollection = this.afs.collection<User>('users');
    const userNames = new Set();
    const reads = userIds.map(id => {
      const user$ = usersCollection.doc<User>(id).valueChanges();
      user$.toPromise().then(user => {
        console.log('adding user');
        userNames.add({
          id: user.uid,
          name: user.name
        });
      });
    });
    console.log(userNames);
    await Promise.all(reads);
    return Array.from(userNames.values());
  }

async getUserNames(userIds: Array<string>) {
    const usersCollection = this.afs.collection<User>('users');
    const userNames = new Set();
    const reads = userIds.map(id => {
      // grab the user
      const user$ = usersCollection.doc<User>(id).valueChanges();
      user$.subscribe(user => {
        console.log('adding user');
        userNames.add({
          id: user.uid,
          name: user.name
        });
      });
    });
    await Promise.all(reads);
    console.log(userNames); // is empty because subscribe hasn't emitted
    return userNames;
  }

我们希望该函数返回我们的 firestore 数据库中的测试数据，但是，由于显示用户名时尚未获取数据，因此它最终为空白。

要重新创建克隆存储库： https://github.com/ChadwickSchool/goal-management-angular/tree/goals-createdBy-error

git checkout goals-createdBy-error
npm install
ng serve -o

单击主页按钮，然后单击名称为 Anastasia 的行以到达出现问题的页面。

【问题讨论】：

标签： angular firebase google-cloud-firestore

【解决方案1】：

我相信 1 不起作用，因为您需要在此行的地图中返回承诺：user$.toPromise().then(user => {

这是我的 1 版本，它使用 observables 直到结束

async getUserNames(userIds: string[]) {
  const usersCollection = this.afs.collection<User>('users');
  const userNames = new Set();
  const reads = userIds.map(id => {
    return usersCollection.doc(id).get().pipe(
      tap(doc => {
        const { uid, name } = doc.data() as User;
        userNames.add({
          id: uid,
          name
        })
      })
    );
  });
  await forkJoin(reads).toPromise();
  return Array.from(userNames.values());
}

【讨论】：