आयनिक 3 - असीमित डेटा के साथ अवलोकन योग्य

Question

सोशल मीडिया ऐप के लिए, मेरे पास AngularFire 2 का उपयोग करके उनके आईडी द्वारा संदर्भित फ़ीड ऑब्जेक्ट्स का संग्रह है। एक बार इन आईडी में से प्रत्येक का वास्तविक डेटा डेटाबेस से खींचा जाता है जो वास्तविक फ़ीड ऑब्जेक्ट्स को संग्रहीत करता है, तो मैं इस जानकारी के साथ feedCards अवलोकन करने योग्य ऑब्जेक्ट को अपडेट करना चाहता हूं ताकि मैं अपने एचटीएमएल में फ़ीड ऑब्जेक्ट्स का संग्रह असीमित रूप से प्रदर्शित कर सकूं। यह घटनाओं की एक बहुत भ्रमित श्रृंखला है, इसलिए मुझे इसे आपके लिए सारांशित करने दें।

चरण-दर-चरण दृष्टिकोण

1. displayFeed()Main पृष्ठ पर feed घटक सही NavController लोड होने से पहले शुरू हो जाती है।
2. displayFeed()twiner आइटम प्राप्त करता है, जो अनिवार्य रूप से उपयोगकर्ता प्रोफ़ाइल आइटम है, और उसके बाद उपयोगकर्ता प्रोफ़ाइल userProfile चर में संग्रहीत करता है।
3. एक बार उपयोगकर्ता प्रोफ़ाइल लोड होने के बाद, वैश्विक feedCards पर्यवेक्षण loadFeed() के बराबर सेट है, जो एक अवलोकन योग्य सरणी देता है।
4. loadFeed() उपयोगकर्ता प्रोफ़ाइल में संग्रहीत फ़ीड संदर्भों की सूची लोड करने के लिए userProfile वैश्विक वस्तु का id मान का उपयोग करता है।
5. इस स्नैपशॉट को तब सदस्यता लिया गया है और स्थानीय feed चर फ़ीड संदर्भों की परिणाम सूची के बराबर सेट है।
6. loadFeed एक अवलोकन योग्य वस्तु देता है जिसमें feed संदर्भ सूची प्रत्येक फ़ीड संदर्भ में डेटा द्वारा मैप की जाती है।
7. pullFeedData(number) फ़ीड ऑब्जेक्ट के संदर्भ में आता है और संबंधित फ़ीड डेटा के साथ एक अवलोकन योग्य देता है।

क्या काम करता है

• alert(JSON.stringify(feedData)); अलर्ट सही feed वस्तु

• मूल रूप से सब कुछ।

काम नहीं करता क्या

• feed.map(... फ़ीड सरणी क्योंकि pullFeedData(number) खींचतान को अपडेट नहीं करता और feedData एसिंक्रोनस रूप से देता है। इस प्रकार, alert(JSON.stringify(data));displayFeed() अलर्ट [null] में।

कोड

feed.ts

userProfile:any; 
    feed: FirebaseListObservable<any>; 
    feedData: FirebaseObjectObservable<any>; 

    feedCards: Observable<any[]>; 

    constructor(public db: AngularFireDatabase, public nativeStorage: NativeStorage) {} 

    displayFeed():void { 
     this.nativeStorage.getItem('twiner').then((res) => { 
       this.userProfile = res; 
       this.feedCards = this.loadFeed(); 
       this.feedCards.subscribe((data)=>{ 
        alert(JSON.stringify(data)); 
       }) 
     }); 
    } 

    loadFeed():Observable<any[]> { 
     var feed; 
     this.feed = this.db.list('/twiners/' + this.userProfile.id + '/feed', { preserveSnapshot: true }); 
     this.feed.subscribe((snapshots)=>{feed = snapshots}); 
     return Observable.of(feed.map((snapshot) => { 
       this.pullFeedData(snapshot.val()).subscribe((feedData)=>{ 
        alert(JSON.stringify(feedData)); 
        return feedData; 
       }); 
     })).delay(1000); 
    } 

    pullFeedData(twine:number):any { 
     return this.db.object('/twines/' + twine, { preserveSnapshot: true }); 
    } 

feed.html

<ion-content fullscreen scroll="true" overflow-scroll="true"> 
     <ion-card *ngIf="feedCards | async">feedCards exist</ion-card> 
     <twine-feed-card *ngFor="let feedCard of feedCards | async" 
      [data]="feedCard" 
     ></twine-feed-card> 
</ion-content> 

सारांश

feed.map फ़ीड ऑब्जेक्ट्स के साथ feed अपडेट नहीं करता है क्योंकि नया डेटा असीमित रूप से खींचा जा रहा है। मुझे इसके लिए एक फिक्स चाहिए।

धन्यवाद!

Answer 1

एक सब्सक्राइब किया जाने वाला एक मूल्य वापस नहीं करता है। यह Subscription ऑब्जेक्ट देता है जिसका उपयोग आप बाद में सदस्यता समाप्त करने के लिए कर सकते हैं।

आप कॉल के दौरान अगली बार देखने योग्य और मूल्यों को वापस करने के लिए switchMap का उपयोग कर सकते हैं। इसके अलावा आप forkJoin का उपयोग कर सकते हैं जो अवलोकन के सरणी को कॉल करेगा और सदस्यता में मूल्यों की सरणी वापस आने तक प्रतीक्षा करें। सबसे पहले feed क्लास चर Observable के रूप में घोषित करें।

feed: Observable<any>; 

तब में

अपने loadFeed():Observable<any[]>

return this.feed.switchMap((snapshots) => { 
      let observableArray = []; 
      snapshots.forEach(snapshot =>{ 
       observableArray.push(this.pullFeedData(snapshot.val())); 
      }); 
      return Observable.forkJoin(observableArray) 
     })