从firestore返回嵌套集合作为angularfire2和firebase的对象 [英] Return nested collection from firestore as object for angularfire2 and firebase

查看:56
本文介绍了从firestore返回嵌套集合作为angularfire2和firebase的对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

假设您具有以下结构:

shopping-carts (collection)
 - shopping-cart 1(doc)
  -- dateCreated (field)
  -- items (collection)
 - shopping-cart 2(doc
  -- dateCreated
  -- items
 .
 .
 .

因此,我们将如何将整个购物车(doc)作为我们定义为的ShoppingCart对象获取

So, how would we go about getting the entire shopping-cart(doc) as an ShoppingCart object that we defined as

export interface ShoppingCart {
  items: ShoppingCartItem[]
  dateCreated: string
}

afs.doc('shopping-cart/id').valueChanges()仅返回dateCreated

afs.doc('shopping-cart/id').valueChanges() only returns the dateCreated

afs.doc('shopping-cart/id').collection('items').valueChanges()返回项目.

容易地将所有事物整合在一起并将其创建为对象吗?

Easy way to get all in one and create it as an object?

推荐答案

可能不是最好的解决方案,但找不到更好的解决方案.

Probably not the best solution, but couldn't find a better one yet.

this.shoppingCartsCollection = afs.collection<Servicio>('shopping-carts', 
        ref => ref.orderBy('dateCreated', 'asc'));

this.shoppingCarts = this.shoppingCartsCollection
    .snapshotChanges()
    .map(values => {
       return values.map(value => {

          const shopping-cart = value.payload.doc.data();
          const itemsArray = shopping-cart.items;
          shopping-cart.observableItems = [];

          for (var i = 0, len = itemsArray.length; i < len; i++) {
             itemDocRef = itemsArray[i];
             value.observableItems.push(afs.doc('items/'+ itemDocRef.id).valueChanges());
          }

          return shopping-cart;
       });
    });

访问您的商品数据,就像其他任何可观察到的

access your items data, like any other observable

<div *ngFor="let shoppingCart of shoppingCarts | async">
   <p *ngFor="let observableItem of shoppingCart.observableItems">
      {{(observableItem | async)?.displayName}}
   </p> 
</div>

这篇关于从firestore返回嵌套集合作为angularfire2和firebase的对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆