AngularFire - Firestore - 如何獲取子集合並合並到HTML中

Question

我現在有一個場景，我有成功獲取的問題集合。 在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()

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