2016-05-05 11 views
6

में प्रतिपादन नहीं कर रहा है मैं एक प्रयोगात्मक (आयनिक 2) ऐप बना रहा हूं जो फ़ायरबेस और एंगुलरफायर 2 (वर्तमान में अल्फा में) का उपयोग करता है। इसके लिए मैं एक आधार के रूप में हारून सॉन्डर्स से इस ट्यूटोरियल अनुसरण कर रहा हूं:AngularFire2 का उपयोग करके Angular2 में Nested Observables

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

AngularFire2 द्वारा observables रिटर्न घोंसले के इस तरह निम्नलिखित प्रस्तुति में प्रदर्शन किया गया:

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

प्रस्तुति मैं में उदाहरण के साथ मुख्य अंतर यह है: https://youtu.be/ngnSOTSS8Q8?t=1h6m37s

यहाँ मेरे विचार है इसके बाद यह तथ्य है कि मैं 'ऑब्जेक्ट' को 'सूची/सरणी' के अंदर अवलोकन करने योग्य हूं। इसके बजाय वे एक सूची में एक सूची जोड़ते हैं। इसका नतीजा यह है कि मैं अपने दृश्य में सीधे {n 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 के परिवर्तनों के आस-पास अपने सिर को लपेट रहा हूं। मैं क्या गलत कर रहा हूं?

संपादित करें: मैं ऊपर जानकारी अपडेट किया है और इसे और अधिक स्पष्ट

उत्तर

16

अपने विशिष्ट समस्या के लिए बनाने के लिए अपने डेटा संरचना ...

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

जोड़ा बनाने के लिए एल्विस ऑपरेटर (?) का उपयोग सुनिश्चित करें कि async आपरेशन पूरा हो गया है और उसके बाद इच्छित मान

स्रोत कोड यहाँ GitHub में पहुंचते हैं: https://github.com/aaronksaunders/afwithngcli

-

आप मेरे से आगे हो गया ... नया ब्लॉग पोस्ट पर काम कर रहा है, लेकिन यहां कोड

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

डेटा

"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 
    } 
    } 
+0

शायद मैं कुछ देख रहा हूं लेकिन मुझे लगता है कि मेरा कोड मूल रूप से वही है। यदि आप अपना कोड बदलते हैं: {{(user.messages.message-id-100.text | async}} यह काम करता है? मेरे लिए यह एक त्रुटि देता है। इसे JSON के रूप में प्रिंट करना ठीक काम करता है। हालांकि मुझे कुंजी है (उदाहरण के लिए: user.lastActivity.name) और पाठ में मान को पाठ के रूप में प्रस्तुत करने की आवश्यकता है (उदाहरण के लिए: गेमिंग)। – DivZero

+0

ब्लॉग पोस्ट btw पर शानदार काम, यह एक महान प्रारंभिक बिंदु था!कृपया सलाह दीजिये कि यदि आप अद्यतन करने का प्रयास करते हैं तो चीजें तोड़ रही हैं। कोणीय 2 बस आरसी में चले गए, आयनिक 2 में कोणीय आरसी और एंगुलरफायर में जाने वाली एक अलग शाखा है, बस बीटा (बेहतर दस्तावेज़ और पूछताछ के साथ) में जाती है जिसके लिए कोणीय आरसी की आवश्यकता होती है। हालांकि वे अभी तक एक साथ अच्छा नहीं खेलते हैं ;-) – DivZero

+0

आप वास्तव में क्या करने की कोशिश कर रहे हैं ... '(user.messages.message-id-100.text | async}} 'काम नहीं करेगा क्योंकि यह एक अवलोकन योग्य नहीं है ... और आप सैमटाइम पर कई प्रश्न पूछ रहे हैं जो आपके प्रश्न का उत्तर देना मुश्किल बनाता है ... आपको अपनी डेटा संरचना –

संबंधित मुद्दे