Angular 5 Firestore 加入 3 可观察数据库 [关闭]答案

【问题标题】：Angular 5 Firestore join 3 observable database [closed]Angular 5 Firestore 加入 3 可观察数据库 [关闭]
【发布时间】：2018-04-19 19:01:19
【问题描述】：

如何将3个firestore集合加入到一起，答案如下 ngOnInit() {

 // this.productService.getImageUrl().subscribe(products=> this.products = products)

this.products = this.afs.collection('/products', ref => ref.where('publish', '==', true))   .snapshotChanges().map(actions => {
return actions.map(a => {
  const data = a.payload.doc.data();
  const id = a.payload.doc.id;
  //this.afs.collection('productPhotos').doc(id)
  return this.afs.collection('users').doc(data.uid).snapshotChanges().map(userActions=>{
    return userActions.payload.data();
  }).map(user=>{
    //  return { id:id, url:user.url, ...data };
    return { id:id, displayName:user.displayName, email:user.email, ...data };
  })
});
 }).flatMap(merge => Observable.combineLatest(merge)).map(data => {
return [].concat(...data).map(d => {
  return d;
 })
 })
}

【问题讨论】：

我不清楚你的 stackblitz 代码，据我了解，我在这里发布了类似的答案link1，link2。希望对您有所帮助。
谢谢！我尝试在上面应用您的解决方案。
感谢链接 2 运行良好，我现在尝试添加第三个表。这是棘手的 3 表。你能看看stackblitz链接吗
请用最少的代码编辑您的问题并简要说明您的问题。
Samuel Liew，c69，这是 Angular 5 和 firestore。我已经回答了我自己的问题。

标签： rxjs observable angular5 google-cloud-firestore

【解决方案1】：

下面的代码将为您提供网址

ngOnInit() {

    this.products = this.afs.collection('/products', ref => ref.where('publish', '==', true))   .snapshotChanges().map(actions => {
    return actions.map(a => {
      const data = a.payload.doc.data();
      const id = a.payload.doc.id;
      return this.afs.collection('users').doc(data.uid).snapshotChanges().map(userActions=>{
        return userActions.payload.data();
      }).map(user=>{
        return this.afs.collection('productPhotos').doc(id).snapshotChanges().map(photoActions=>{
            return photoActions.payload.data();
        }).map(res=>{
          return { id:id, url:res.url, displayName:user.displayName, email:user.email, ...data };
        })
      }).flatMap(merge => Observable.combineLatest(merge))
    });
    }).flatMap(merge => Observable.combineLatest(merge)).map(data => {
    return [].concat(...data).map(d => {
      return d;
   })
 })

}

【讨论】：

谢谢，它可以工作，还有一个问题，由于产品是可观察的对象，在 ngFor 中循环 ngFor 有问题，请你帮忙看看。与多张照片。如何订阅？
您可以提出一个新问题来解释您当前的问题，而不属于此问题标题的范围。
嗨：Hareesh 你能帮我弄清楚我的问题吗？在这种情况下如何显示多张图片。
感谢 Hareesh，您的代码适用于多个视图。谢谢。