Angularfire2 wie man zwei Listen kombiniert

Question

Ich benutze Angularfire2 v5. In meiner Datenbank habe ich zwei Listen, eine ist cart und eine andere ist product. In der Warenkorb-Liste gibt es ein Feld, das die Produkt-ID enthält, und jetzt möchte ich eine Observable, die Daten für den Warenkorb und das Produkt enthält. Derzeit versuche ich mit dieser Art und Weise

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

jetzt in html diesen

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

verwenden, aber es zeigt mir null. Wie kann ich in einem ngFor async

Answer 1

Sagen Sie beide Daten die Karre und Produktliste zeigen eine Struktur wie folgt hatte:

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

Dann Sie es gegen den anderen Teil der db Karte könnte, da Sie habe schon den Schlüssel, den ich gerade verwende valueChanges() hier.

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

Das Produkt wird dann async, so dass Sie mit dem Rohr bräuchten das auch aus Ihrer Sicht:

<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>