Вложенные Observables в Angular2, использующие AngularFire2 без визуализации в поле зрения
Я создаю экспериментальное (Ionic 2) приложение, которое использует Firebase и AngularFire2 (в настоящее время в альфа-версии). Для этого я следую этому уроку от Аарона Сондерса за основу:
http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2 https://github.com/aaronksaunders/ionic2-angularfire-sample
Ниже приведены мои home.ts и мой home.html.
this.projects = af.list('/items').map( (items) => {
return items.map( item => {
item.meta = af.object(`/item_meta/${item.$key}`)
return item
})
})
Этот способ вложения возвращаемых значений Observables AngularFire2 был продемонстрирован в следующей презентации:https://youtu.be/ngnSOTSS8Q8?t=1h6m37s
Вот мой взгляд:
<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>
Основное отличие от примера в презентации, за которой я следовал, заключается в том, что я вкладываю наблюдаемый «объект» в наблюдаемый «список / массив». Вместо этого они добавляют список в список. Следствием этого является то, что я пытаюсь визуализировать {{item.meta.stockPrice}} в моем представлении напрямую, вместо того, чтобы вложить ngFor.
Вот как выглядят мои данные:
{
"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"
}
}
}
Я не могу понять, почему объект не хочет отображать. Если я вывожу его в JSON, это показывает, что данные есть. Пожалуйста, обратите внимание, что я новичок в Angular2 и все еще обдумываю изменения Angular1. Что я делаю неправильно?
Изменить: я обновил информацию выше и добавил свою структуру данных, чтобы сделать ее более понятной