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

Question

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

Step-by-step Approach

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

What Works

alert(JSON.stringify(feedData)); 提醒正确的 feed 对象
基本上其他都一样。

What Doesn't Work

feed.map(... 不更新提要数组，因为 pullFeedData(number) 异步拉取 returns feedData。因此，displayFeed() 中的 alert(JSON.stringify(data)); 提醒 [null]。

Code

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>

Summary

feed.map 不会使用提要对象更新 feed，因为新数据是异步提取的。我需要解决这个问题。

谢谢！

Answer 1

订阅的可观察对象没有 return 值。它 return 是一个 Subscription 对象，您以后可以用它来取消订阅。

您可以在调用期间使用 switchMap 从第一个可观察对象切换到下一个可观察对象，并 return 值。您也可以使用 forkJoin ，它将调用一个可观察对象数组并等待值数组在订阅中被 returned。首先将 feed class 变量声明为 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)
        })

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

Ionic 3 - Update Observable with Asynchronous Data

javascript

asynchronous

firebase

ionic2

ionic3