2

我正在使用 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数据

4

1 回答 1

3

假设您有这样的结构：

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>
于 2017-11-26T02:08:41.207 回答