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

Question

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

Step-by-step Approach

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

What Works

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

• 基本上是其他一切。

What Doesn't Work

• feed.map(... 不会更新提要数组，因为 pullFeedData(number) 异步拉取并返回 feedData。因此, alert(JSON.stringify(data)); 在 displayFeed() 中提醒 [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 对象更新 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)
        })