Angularfire2如何合并两个列表

Azam Alvi

我正在使用Angularfire2 v5。在我的数据库中，我有两个列表，一个是cart，另一个是product。在购物车列表中，有一个包含产品ID的字段，现在我想要一个Observable包含购物车及其产品数据的字段。目前，我正在尝试这种方式

cart: Observable<any>;
constructor(public db: AngularFireDatabase) {}

ionViewDidLoad() {

this.cart = this.db.list(`/cart`)
  .snapshotChanges()
  .map(changes => {
    return changes.map(c => {
      let productObservables:Observable<any> = this.db
        .list(`product/${c.key}`).snapshotChanges()
        .map(m=>{
            m.map(p=>({
              key:c.payload.key, ...p.payload.val()
            }));
            return m;
        });
        return productObservables;
    })
  });

现在在HTML中使用此

<ion-item *ngFor="let item of cart|async">
  <ion-label>
    {{item.key}}
    {{item.name}}
  </ion-label>

但它显示我为空。我怎么可以显示数据在一个购物车和产品列表ngFor异步

詹姆斯·丹尼尔斯

假设您有这样的结构：

cart:
  yyy:
    productId: aaa
    qty: 2
  zzz:
    productId: bbb
    qty: 1
products:
  aaa:
    name: AAA
  bbb:
    name: BBB

然后，您可以将它映射到数据库的另一部分，因为您已经有了我在valueChanges()这里使用的密钥。

this.cart = this.db.list(`/cart`)
  .snapshotChanges()
  .map(changes => 
    changes.map(c => ({
      key: c.payload.key,
      product: this.db.object(`products/${c.payload.val().productId}`).valueChanges(),
      ...p.payload.val()
    }))
  );

然后，该产品将是异步的，因此您也需要在视图中使用该管道：

<ion-item *ngFor="let item of cart | async">
  <ion-label *ngIf="item.product | async; let product; else loading">
    {{product.name}} x {{item.qty}} {{item.key}}
  </ion-label>
<ion-item>
<ng-template #loading><ion-spinner></ion-spinner></ng-template>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。