Ionic 3 - 非同期データで観測可能な更新

Question

ソーシャルメディアアプリの場合、AngularFire 2を使用してIDで参照されるフィードオブジェクトのコレクションがあります。これらのIDのそれぞれに関連するデータが実際のフィードオブジェクトを格納するデータベースから取得されると、feedCards Observableオブジェクトをこの情報で更新して、HTMLにフィードオブジェクトのコレクションを非同期で表示できます。それは非常に混乱しやすいイベントチェーンなので、まとめてみましょう。

ステップバイステップのアプローチ

1. displayFeed()右NavController負荷Mainページのfeed成分の前に呼び出されます。
2. displayFeed()は、実質的にユーザープロファイル項目であるtwiner項目を取得し、userProfile変数にユーザープロファイルを格納します。
3. ユーザープロファイルがロードされると、グローバルfeedCardsオブザーバブルはloadFeed()に設定され、オブザーバブルアレイが返されます。
4. loadFeed()は、userProfileグローバルオブジェクトのidの値を使用して、ユーザープロファイルに格納されているフィード参照のリストを読み込みます。
5. このスナップショットはサブスクライブされ、ローカルのfeed変数はフィード参照の結果リストと等しく設定されます。
6. loadFeedは、feed参照リストが各フィード参照に含まれるデータによってマップされるObservableオブジェクトを返します。
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.mapfeedは、新しいデータが非同期にプルされるため、フィードオブジェクトを更新しません。私はこれのための修正が必要です。

ありがとうございました！

Answer 1

subscribed observableは値を返しません。後で退会するために使用できる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) 
     })