Angular/Firestore - 用于构建数组的嵌套集合查询

Question

我收藏了artists。其中一些艺术家文档有一个专辑集合，其下方将有单独的专辑文档。我正在尝试在我的 html 中创建一个显示每个艺术家及其专辑的视图。但是，我在充分构建阵列时遇到了一点困难。这是据我所知：

arrayForTemplate = [];

--

fetchArtists(){

 var albums_array = [];

 this.db.collection(`pathexample`).orderBy("order").get().then((querySnapshot) => {
    querySnapshot.forEach((artist) => {

      const artist_data = artist.data();
      const artist_id = artist.id;
      artist_data["id"] = artist_id;

      // Push the list of artists into the array
      this.arrayForTemplate.push(artist_data)

     this.db.collection(`pathexample/${artist_id}/albums`).orderBy("order").get().then((querySnapshot) => {
        querySnapshot.forEach((album) => {

          const album_data = album.data();
          const album_id = album.id;       
          
          // Push an array of albums into each artist 
          var album_information = {};
          album_information["album_photo"] = album_data.album_photo;
          album_information["album_date"] = album_data.album_date;

          albums_array.push(album_information)

        });

      });
    });    
})
.catch((error) => {
    console.log("Error getting documents: ", error);
});

}

1. 我的模板中的数组
2. 执行查询以获取所有艺术家
3. 将返回的数据推入数组中
4. 对于每个艺术家，根据艺术家 ID 查询专辑收藏
5. 为每个专辑创建一个对象，其中包含我希望包含在数组中的数据
6. 用新数据更新albums_array

我现在的问题是：如何将所有这些数据推送到 arrayForTemplate 数组中，以便数据的结构如下：（如果这是不好的做法，或者是否有更好的方法，请告诉我实现这一点）

• 艺术家 1
• 艺术家 2
  • [专辑]
    • 专辑照片
    • 专辑日期
• 艺术家 3
  • [专辑]
    • 专辑照片
    • 专辑日期

目标是使 HTML 如下所示：

<div *ngFor="let artist of arrayForTemplate">
    <div> {{ artist.name }} </div>
    <div *ngFor="let album of artist.albums"> {{ album.album.photo }} </div>
</div>

Answer 1

Try this once
--
fetchArtists(){
    arrayForTemplate = [];
 this.db.collection(`pathexample`).orderBy("order").get().then((querySnapshot) => {
    querySnapshot.forEach(async (artist) => {
        let artist_data = artist.data();
        artist_data["id"] = artist.id;
        let albums = await this.getAlbums(artist.id)
        artist_data["albums"] = albums;
        arrayForTemplate(artist_data)
  });    
})
.catch((error) => {
    console.log("Error getting documents: ", error);
});
}
getAlbums(artist_id){
    let albums = []
    return new Promise((resolve, reject) => {
        this.db.collection(`pathexample/${artist_id}/albums`).orderBy("order").get().then((querySnapshot) => {
            for (let album of querySnapshot) {
                let album_data = album.data();
                album_data["id"] = album.id;
                // Push an array of albums into each artist 
                album_data["photo"] = album_data.album_photo;
                album_data["date"] = album_data.album_date;
                albums.push(album_data)
            }
            resolve(albums)
        }).catch((error) => {
            resolve([])
        });
    })

}

<div *ngFor="let artist of arrayForTemplate">
    <div> {{ artist.name }} </div>
    <div *ngFor="let album of artist.albums"> {{ album.photo }} </div>
</div>