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:
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 way of nesting the Observables returns by AngularFire2 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 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.
This is 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 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?
Edit: I've update the info above and added my data structure to make it more clear
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…