Ionic 3 - 使用异步数据更新可观察

Question

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

循序渐进的方法

1. displayFeed()在NavController加载Main页面上的feed组件之前调用。
2. displayFeed()获取twiner项(实质上是用户配置文件项)，然后将用户配置文件存储在userProfile变量中。
3. 加载用户配置文件后，全局feedCards可观察性设置为loadFeed()，这将返回一个可观察数组。
4. loadFeed()使用userProfile全局对象的id值来加载存储在用户配置文件中的源引用列表。
5. 然后订阅此快照，并将本地feed变量设置为等于源引用的结果列表。
6. loadFeed返回一个 Observable 对象，其中feed引用列表由每个源引用包含的数据映射。
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.map不会使用源对象更新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)
})