Angularfire2如何合并两个列表

我正在使用Angularfire2 v5。在我的数据库中，我有两个列表，一个是cart，另一个是product。购物车列表中有一个包含产品ID的字段，现在我需要一个包含购物车及其产品数据的Observable。目前我使用这个Angularfire2如何合并两个列表

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

这样

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努力，但它让我空。

来源

2017-11-25 Azam Alvi

我怎么能在一个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>

来源

2017-11-26 02:08:41

Angularfire2如何合并两个列表

回答

相关问题