parametros - Observables anidados en Angular2 con AngularFire2 sin renderizar a la vista

pasar datos entre componentes angular 5

Question

Estoy construyendo una aplicación experimental (Ionic 2) que usa Firebase y AngularFire2 (actualmente en alfa). Para esto estoy siguiendo este tutorial de Aaron Saunders como base:

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

Debajo están mis home.ts y mi home.html.

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

Esta forma de anidar los retornos de Observables por AngularFire2 se demostró en la siguiente presentación: https://youtu.be/ngnSOTSS8Q8?t=1h6m37s

Aquí está mi vista:

<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>

La diferencia principal con el ejemplo en la presentación que seguí es el hecho de que estoy anidando un ''objeto'' Observable dentro de una ''lista / matriz'' Observable. En su lugar, agregan una lista dentro de una lista. La consecuencia de esto es que estoy tratando de mostrar {{item.meta.stockPrice}} en mi vista directamente en lugar de anidar un ngFor.

Así es como se ven mis datos:

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

Parece que no puedo entender por qué el objeto no quiere renderizar. Si lo envío a JSON, muestra que los datos están ahí. Tenga en cuenta que soy nuevo en Angular2 y aún estoy pensando en los cambios de Angular1. ¿Qué estoy haciendo mal?

Editar: he actualizado la información anterior y he agregado mi estructura de datos para que quede más claro

Answer 1

Para su problema específico ...

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

use el operador elvis ( ? ) para asegurarse de que la operación async esté completa y luego acceda al valor deseado

código fuente aquí en github: https://github.com/aaronksaunders/afwithngcli

-

Me adelanté ... trabajando en la nueva publicación del blog, pero aquí está el código

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
})
})

datos

 "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" : "[email protected]",
"provider" : "password"
},
"9c6ea912-ec24-4127-b123-6512ed135f06" : {
"displayName" : "[email protected]",
"provider" : "password"
},
"cdcf32af-a8cd-467d-a04f-dfc223e890d2" : {
"avatar" : "https://secure.gravatar.com/avatar/d23563ab3014ce965a90c37b22a34da8?d=retro",
"displayName" : "[email protected]",
"provider" : 4
}
}