title: Angularfire2 how to combine two list
body: <p>I am using Angularfire2 v5. In my database I have two lists one is <code>cart</code>and other one is <code>product</code>. In cart list there is a field which contains product id and now I want a <code>Observable</code> that contains data for both the cart and it's product. Currently I am trying with this way</p>
  
  <pre><code>cart: Observable&lt;any&gt;;
  constructor(public db: AngularFireDatabase) {}
  
  ionViewDidLoad() {
  
  this.cart = this.db.list(`/cart`)
    .snapshotChanges()
    .map(changes =&gt; {
      return changes.map(c =&gt; {
        let productObservables:Observable&lt;any&gt; = this.db
          .list(`product/${c.key}`).snapshotChanges()
          .map(m=&gt;{
              m.map(p=&gt;({
                key:c.payload.key, ...p.payload.val()
              }));
              return m;
          });
          return productObservables;
      })
    });
  </code></pre>
  
  <p>now in html using this </p>
  
  <pre><code>&lt;ion-item *ngFor="let item of cart|async"&gt;
    &lt;ion-label&gt;
      {{item.key}}
      {{item.name}}
    &lt;/ion-label&gt;
  </code></pre>
  
  <p>but it shows me null. How can I display both data the cart and product list in one <code>ngFor</code> async
      </p>