Osservazioni annidate in Angular2 utilizzando AngularFire2 non rendering in vista

Question

Sto costruendo un'app sperimentale (Ionic 2) che utilizza Firebase e AngularFire2 (attualmente in alpha). Per questo sto seguendo questo tutorial da Aaron Saunders come base:

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

Qui di seguito sono i miei home.ts e la mia home.html.

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

Questo modo di nidificazione dei rendimenti osservabili da AngularFire2 è stata dimostrata nel seguente presentazione: https://youtu.be/ngnSOTSS8Q8?t=1h6m37s

Qui è la mia opinione:

<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 differenza principale con l'esempio nella presentazione I seguito è il fatto che sto annidando un 'oggetto' osservabile all'interno di un 'elenco/array' osservabile. Invece aggiungono una lista all'interno di una lista. La conseguenza di ciò è che sto cercando di rendere direttamente {{item.meta.stockPrice}} nella mia vista invece di nidificare un ngFor.

Questo è ciò che i miei dati appare come:

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

io non riesco a capire il motivo per cui oggetto non vuole rendere. Se lo invio a JSON mostra che i dati sono lì. Si prega di notare che sono nuovo di Angular2 e ancora avvolto la mia mente attorno ai cambiamenti da Angular1. Che cosa sto facendo di sbagliato?

Edit: ho aggiornare le informazioni di cui sopra e aggiunto il mio struttura dei dati per renderlo più chiaro

Answer 1

Per il vostro problema specifico ...

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

utilizzare l'operatore elvis (?) per rendere che l'operazione async è completa e quindi accedere al valore desiderato

codice sorgente qui in github: https://github.com/aaronksaunders/afwithngcli

-

hai davanti a me ... a lavorare sul nuovo post sul blog, ma qui è il codice

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

dati

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