Ionic 3 - Update observed with asynchronous data

Question

In a social media application, I have a set of feed objects referenced by their identifiers using AngularFire 2. After each of these identifiers has the corresponding data retrieved from the database in which the actual feed objects are stored, I want to update the feedCardsObservable object with this information so that I can asynchronously display the collection of feed objects in my HTML. This is a rather confusing chain of events, so let me summarize it for you.

Step by step approach

• displayFeed()called just before it NavControllerloads the component feedon the page Main.
• displayFeed()gets an element twiner, which is essentially a user profile element, and then stores the user profile in a variable userProfile.
• After loading the user profile, the global feedCardsObservable is set to equal loadFeed(), which returns an Observable array.
• loadFeed()uses the value of the idglobal object userProfileto load a list of links to channels stored in the user profile.
• This snapshot is then signed, and the local variable is feedset equal to the list of feed link results.
• loadFeedreturns an Observable object in which the list of links is feedmapped to the data contained in each link to the channel.
• pullFeedData(number) takes a reference to the feed object and returns the observable with the corresponding feed data.

What works

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