Angularfire2 두 목록을 결합하는 방법

Question

Angularfire2 v5를 사용하고 있습니다. 내 데이터베이스에는 두 개의 목록이 있으며 cart이고 다른 하나는 product입니다. 장바구니 목록에는 제품 ID가 들어있는 입력란이 있으며 지금은 장바구니와 제품 모두에 대한 데이터가 포함 된 Observable을 원합니다. 현재 나는이

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

를 사용하여이 방법을 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; 
    }) 
    }); 

으로 노력하고 있지만 내가 널 보여줍니다. 당신 때문에

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

그런 다음 당신은 DB의 다른 부분에 대해 매핑 수 :

Answer 1

는이 같은 구조를 가지고 말 어떻게 하나 ngFor 비동기 모두 데이터를 카트 및 제품 목록을 표시 할 수 있습니다 이미 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>