javascript - AngularFire - Firestore - 如何获取子集合并合并到 HTML 中

Question

我目前有一个场景，我有一组已成功获取的问题。在 firestore 中，每个问题 (issues > issuesID) 都有一个名为 images 的子集合。

在该集合中，每个图像都有文档 ID。 (问题 > 问题 ID > 图像 > 图像 ID)。我有一个显示所有问题的页面，并且我还想显示每个问题的所有相关图像。

在下面的 HTML 中，我添加了一条注释，说明我希望问题图像的去向。

期望的结果:

• 第 1 期
  • 第 1 期图片
• 第 2 期
  • 第 2 期图片

等等

获取问题

 this.issuesCollection = this.afs.collection<any>(`users/${this.userID}/projects/${this.project_id}/issues`, ref => ref.orderBy('issue_order'));
      // this.issues = this.issuesCollection.valueChanges();   
      this.issues = this.issuesCollection.snapshotChanges().pipe(
        map(actions => actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        }))
      );

HTML

<ul>
   <li *ngFor="let issue of issues | async">
      {{issue.issue_title}}
      <ul>
         <li>
             <!-- THIS IS WHERE I WOULD LIKE THE IMAGES PER ISSUE TO GO -->      
         </li>
      </ul>
    </li>
</ul>

图像集合引用 这是图像的位置，其中 id 是问题的 ID。这还没有连接，但是图像的位置。

this.imagesCollection = this.afs.collection<any>(`users/${this.userID}/projects/${this.project_id}/issues/${id}/images`);
this.images = this.imagesCollection.snapshotChanges()

Answer 1

Firebase 中有一个名为 Collection group query 的新功能，这绝对对您的情况有帮助。但不幸的是，我认为这还没有在 angularfire2 中实现。

您可以使用RxJS MergeMap

  const collection = this.firestore.collection('users');
  return  collection.valueChanges.pipe(
    mergeMap( (users: User[]) =>  
               this.firestore.doc(`stories/${users[0].uid}`).
                        valueChanges().pipe(map(
                          (storie) => Object.assign({}, {users[0].uid, ...users[0], ...stories}
                      ))
           ))
   );