Ionic 3 - 使用异步数据更新Observable

Question

对于社交媒体应用,我有一组使用其ID引用的Feed对象AngularFire 2.一旦这些ID中的每一个都从存储实际feed对象的数据库中提取了相关数据,我希望feedCards用这些信息更新Observable对象,这样我就可以在HTML中异步显示一个feed对象集合.这是一个非常混乱的事件链,所以让我总结一下.

循序渐进的方法

1. displayFeed()在NavController加载页面feed上的组件之前调用Main.
2. displayFeed()获取twiner项目,该项目本质上是用户配置文件项目,然后将用户配置文件存储在userProfile变量中.
3. 加载用户配置文件后,将全局feedCardsObservable设置为等于loadFeed(),返回Observable数组.
4. loadFeed()使用全局对象的id值userProfile来加载存储在用户配置文件中的订阅源引用列表.
5. 然后订阅此快照,并将局部feed变量设置为等于源引用的结果列表.
6. loadFeed返回一个Observable对象,其中feed引用列表由每个feed引用包含的数据映射.
7. pullFeedData(number) 接受对feed对象的引用并返回带有关联的feed数据的observable.

什么有用

• alert(JSON.stringify(feedData));提醒正确的feed对象

• 其他一切.

什么行不通

• feed.map(...不会更新feed数组,因为pullFeedData(number)pulls并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使用Feed对象更新,因为新数据是异步提取的.我需要修复此问题.

谢谢!

Answer 1

订阅的observable不返回值.它返回一个Subscription对象,您可以使用该对象稍后取消订阅.

您可以使用switchMap在调用期间从第一个observable切换到下一个observable并返回值.你也可以使用forkJoin它来调用一个observable数组,并等到订阅中返回值数组.首先将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)
        })