AngularFire - Firestore - 如何获取子集合并合并到 HTML答案

【问题标题】：AngularFire - Firestore - How to get sub collection and merge into HTMLAngularFire - Firestore - 如何获取子集合并合并到 HTML
【发布时间】：2019-10-03 17:50:02
【问题描述】：

我现在有一个场景，我有一系列问题，我成功地获取了这些问题。在 Firestore 中，每个问题 (issues > issueID) 都有一个名为 images 的子集合。

在该集合中，每张图片都有 doc id。 (issues > issueID > images > imageID)。我有一个显示所有问题的页面，我还想显示每个问题的所有相关图片。

在我下面的 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()

【问题讨论】：

标签： javascript google-cloud-firestore angularfire5

【解决方案1】：

firebase 中有一个名为 Collection group query 的新功能，它绝对可以帮助您解决问题。但不幸的是，我认为这已经在 angularfire2 中实现了。

你可以使用RxJSMergeMap

  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}
                      ))
           ))
   );

【讨论】：