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

Question

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

循序渐进的方法

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

什么有用

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

• 其他一切。

什么行不通

• feed.map(...不更新feed数组，因为pullFeedData(number) feedData异步拉取并返回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来调用一个observables数组，并等到订阅中返回值数组。 首先将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)
        })