Angularfire2 2リストを結合する方法

Question

私はAngularfire2 v5を使用しています。私のデータベースで私はcartと他の1つはproductです2つのリストを持っています。カートリストには商品IDを含むフィールドがあり、カートとその商品の両方のデータを含むObservableが必要になります。現在、私は、このようなHTMLで今

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; 
    }) 
    }); 

この

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

を使用してしようとしていますが、それは私がnullを示しています。どのように私は1 ngFor非同期

Answer 1

の両方のデータにカートと製品のリストを表示することができますことは、あなたがこのような構造を持っていたと言う：

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

次にあなたがするので、DBの他の部分に対してそれをマップすることができすでに鍵を持っています。ここでは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>