title: Nested Observables in Angular2 using AngularFire2 not rendering in view
body: <p>I'm building an experimental (Ionic 2) app that uses Firebase and AngularFire2 (currently in alpha). For this I'm following this tutorial from Aaron Saunders as a basis:</p>
  
  <p><a href="http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2" rel="noreferrer">http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2</a>
  <a href="https://github.com/aaronksaunders/ionic2-angularfire-sample" rel="noreferrer">https://github.com/aaronksaunders/ionic2-angularfire-sample</a></p>
  
  <p>Below are my home.ts and my home.html. </p>
  
  <pre><code>this.projects = af.list('/items').map( (items) =&gt; {
      return items.map( item =&gt; {
          item.meta = af.object(`/item_meta/${item.$key}`)
          return item
      })
  })
  </code></pre>
  
  <p>This way of nesting the Observables returns by AngularFire2 was demonstrated in the following presentation: <a href="https://youtu.be/ngnSOTSS8Q8?t=1h6m37s" rel="noreferrer">https://youtu.be/ngnSOTSS8Q8?t=1h6m37s</a></p>
  
  <p>Here is my view:</p>
  
  <pre><code>&lt;ion-card *ngFor="#item of items | async"&gt;
      &lt;ion-card-header&gt;
          {{item.name}}
      &lt;/ion-card-header&gt;
      &lt;ion-card-content&gt;
          {{item.description}}
          &lt;br&gt;
  
          {{item.meta.stockPrice | async}}
  
      &lt;/ion-card-content&gt;
  &lt;/ion-card&gt;
  </code></pre>
  
  <p>The main difference with the example in the presentation I followed is the fact that I'm nesting an 'object' Observable inside an 'list/array' Observable. Instead they add a list within a list. The consequence of this is that I'm trying to render {{ item.meta.stockPrice }} in my view directly instead of nesting an ngFor.</p>
  
  <p>This is what my data looks like:</p>
  
  <pre><code>{
      "items":
          {
              "item1":{
                  "name": "Item 1",
                  "description": "1234"
              },
              "item2":{
                  "name": "Item 2",
                  "description": "abcd"
              }
          }
      "items_meta"{
          "item1":{
              "stockPrice": 1234,
              "moarData": "derp"
          },
          "item2":{
              "stockPrice": 386,
              "moarData": "lolz"
          }
      }
  }
  </code></pre>
  
  <p>I can't seem to figure out why object doesn't want to render. If I output it to JSON it shows that the data is there. Please note that I am new to Angular2 and still wrapping my head around the changes from Angular1. What am I doing wrong?</p>
  
  <p>Edit: I've update the info above and added my data structure to make it more clear</p>