Question

目前，我遇到了一系列我成功解决的问题。在Firestore中，每个问题（issues > issueID）都有一个名为images的子集合。

在该集合中，每个图像都有文档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()

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

AngularFire-Firestore-如何获取子集合并将其合并为HTML

1 个答案: