Nested observational data in Angular2 using AngularFire2 not displayed in view

Question

I am creating an experimental application (Ionic 2) that uses Firebase and AngularFire2 (currently in alpha). For this, I follow this guide from Aaron Saunders as a basis:

http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2 https://github.com/aaronksaunders/ionic2-angularfire-sample

Below are my home.ts and my home.html.

this.projects = af.list('/items').map( (items) => { return items.map( item => { item.meta = af.object(`/item_meta/${item.$key}`) return item }) }) 

This method of nesting Observables AngularFire2 returns was demonstrated in the following presentation: https://youtu.be/ngnSOTSS8Q8?t=1h6m37s

Here is my view:

 <ion-card *ngFor="#item of items | async"> <ion-card-header> {{item.name}} </ion-card-header> <ion-card-content> {{item.description}} <br> {{item.meta.stockPrice | async}} </ion-card-content> </ion-card> 

The main difference from the example in the presentation I presented is that I nested the "object" observed inside the "list / array" of the Observable. Instead, they add the list to the list. The consequence of this is that I am trying to do {{item.meta.stockPrice}} in my opinion directly, and not nested ngFor.

Here's what my data looks like:

 { "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" } } } 

I cannot understand why the object does not want to render. If I output it to JSON, it shows that there is data. Note that I am new to Angular2 and still enveloping changes with Angular1. What am I doing wrong?

Edit: I updated the information above and added my data structure to make it more understandable.

Answer 1

For your specific problem ...

 {{(item.meta | async)?.stockPrice}} 

use the elvis ( ? ) statement to verify that the async operation is complete, and then access the desired value

here on github: https://github.com/aaronksaunders/afwithngcli

-

you got ahead of me ... working on a new blog post but here is the code

script.html

 </ion-card> <ion-card *ngFor="#user of usersWithMessages | async"> <ion-card-header> {{user.displayName}} </ion-card-header> <ion-card-content> {{ (user.messages | async) | json}} </ion-card-content> </ion-card> 

script.ts

 this.usersWithMessages = this.af.list('/users').map((_users) => { return _users.map((_user) => { _user.messages = this.af.object("/userObjects/public-messages/" +_user.$key) return _user }) }) 

<strong> data

  "userObjects" : { "public-messages" : { "8d75a63e-80cd-40cc-8f8b-87d3d33b0cd0" : { "message-id-0" : { "text" : "a public message" } }, "9c6ea912-ec24-4127-b123-6512ed135f06" : { "-KFCGp5ojo7JSX2myOPE" : { "date" : "1460511658442.75", "text" : "this should be a. public message" }, "-KFCJc4GtEo_PDWi7hru" : { "date" : "1460512391529.69", "text" : "this is a message that should be public" }, "message-id-100" : { "date" : "3243245411111", "text" : "public for the other user" } } } }, "users" : { "8d75a63e-80cd-40cc-8f8b-87d3d33b0cd0" : { "displayName" : " [e-mail] ", "provider" : "password" }, "9c6ea912-ec24-4127-b123-6512ed135f06" : { "displayName" : " [e-mail] ", "provider" : "password" }, "cdcf32af-a8cd-467d-a04f-dfc223e890d2" : { "avatar" : "https://secure.gravatar.com/avatar/d23563ab3014ce965a90c37b22a34da8?d=retro", "displayName" : " [e-mail] ", "provider" : 4 } }