問(wèn)題描述

對(duì)于社交媒體應(yīng)用程序，我有一組使用 AngularFire 2 由其 ID 引用的提要對(duì)象.一旦這些 ID 中的每一個(gè)都從存儲(chǔ)實(shí)際提要對(duì)象的數(shù)據(jù)庫(kù)中提取了相關(guān)數(shù)據(jù)，我希望使用此信息更新 feedCards 可觀(guān)察對(duì)象，以便我可以異步顯示提要對(duì)象的集合.HTML.這是一個(gè)相當(dāng)混亂的事件鏈，所以讓我為你總結(jié)一下.

循序漸進(jìn)的方法

1. displayFeed() 在 NavController 加載 Main 頁(yè)面上的 feed 組件之前調(diào)用.
2. displayFeed() 獲取 twiner 項(xiàng)，它本質(zhì)上是一個(gè)用戶(hù)配置文件項(xiàng)，然后將用戶(hù)配置文件存儲(chǔ)在 userProfile 變量中.
3. 加載用戶(hù)配置文件后，全局 feedCards Observable 將設(shè)置為等于 loadFeed()，返回一個(gè) Observable 數(shù)組.
4. loadFeed() 使用 userProfile 全局對(duì)象的 id 值來(lái)加載存儲(chǔ)在用戶(hù)配置文件中的提要參考列表.
5. 然后訂閱此快照并將本地 feed 變量設(shè)置為等于提要引用的結(jié)果列表.
6. loadFeed 返回一個(gè) Observable 對(duì)象，其中 feed 引用列表由每個(gè)提要引用包含的數(shù)據(jù)映射.
7. pullFeedData(number) 接受對(duì) feed 對(duì)象的引用并返回一個(gè)帶有相關(guān) feed 數(shù)據(jù)的 observable.

<塊引用>

什么有效

• alert(JSON.stringify(feedData)); 提醒正確的 feed 對(duì)象

• 基本上其他的.

什么不起作用

• feed.map(... 不會(huì)更新 feed 數(shù)組，因?yàn)?pullFeedData(number) 會(huì)異步拉取并返回 feedData.因此, alert(JSON.stringify(data)); in displayFeed() 警報(bào) [null].

代碼

feed.ts

 userProfile:any;提要:FirebaseListObservable<any>;feedData: FirebaseObjectObservable<any>;feedCards:可觀(guān)察的<any[]>；構(gòu)造函數(shù)(公共數(shù)據(jù)庫(kù):AngularFireDatabase，公共 nativeStorage:NativeStorage){}displayFeed():無(wú)效{this.nativeStorage.getItem('twiner').then((res) => {this.userProfile = res;this.feedCards = this.loadFeed();this.feedCards.subscribe((數(shù)據(jù))=>{警報(bào)(JSON.stringify(數(shù)據(jù)))；})});}loadFeed():Observable<any[]>{變種飼料；this.feed = this.db.list('/twiners/' + this.userProfile.id + '/feed', { preserveSnapshot: true });this.feed.subscribe((snapshots)=>{feed = snapshots});返回 Observable.of(feed.map((snapshot) => {this.pullFeedData(snapshot.val()).subscribe((feedData)=>{警報(bào)(JSON.stringify(feedData))；返回飼料數(shù)據(jù)；});})).延遲(1000);}pullFeedData(麻線(xiàn):數(shù)字):任何{return this.db.object('/twines/' + twine, { preserveSnapshot: true });}

feed.html

<塊引用>

總結(jié)

feed.map 不會(huì)用 feed 對(duì)象更新 feed，因?yàn)樾聰?shù)據(jù)是異步提取的.我需要解決這個(gè)問(wèn)題.

謝謝！

訂閱的 observable 沒(méi)有返回值.它返回一個(gè) Subscription 對(duì)象，您可以稍后使用它來(lái)取消訂閱.

您可以在調(diào)用過(guò)程中使用 switchMap 從第一個(gè) observable 切換到下一個(gè) observable 并返回值.你也可以使用 forkJoin 來(lái)調(diào)用一個(gè) observables 數(shù)組并等到值數(shù)組在訂閱中返回.首先將 feed 類(lèi)變量聲明為 Observable.

feed: Observable<any>;

然后在你的 loadFeed():Observable<any[]>

return this.feed.switchMap((snapshots) => {讓 observableArray = [];快照.forEach(快照 =>{observableArray.push(this.pullFeedData(snapshot.val()));});返回 Observable.forkJoin(observableArray)})

For a social media app, I have a collection of feed objects referenced by their IDs using AngularFire 2. Once each of these IDs has its relevant data pulled from the database that stores the actual feed objects, I wish to update the feedCards Observable object with this information so I can asynchronously display a collection of feed objects in my HTML. It's a pretty confusing chain of events, so let me summarize it for you.

Step-by-step Approach

1. displayFeed() is invoked right before the NavController loads the feed component on the Main page.
2. displayFeed() gets the twiner item, which is essentially a user profile item, and then stores the user profile in the userProfile variable.
3. Once the user profile is loaded, the global feedCards Observable is set equal to loadFeed(), which returns an Observable array.
4. loadFeed() uses the id value of the userProfile global object to load the list of feed references stored in the user profile.
5. This snapshot is then subscribed to and the local feed variable is set equal to the result list of feed references.
6. loadFeed returns an Observable object in which the feed reference list is mapped by the data each feed reference contains.
7. pullFeedData(number) takes in a reference to a feed object and returns an observable with the associated feed data.

What Works

• alert(JSON.stringify(feedData)); alerts the correct feed object

• Basically everything else.

   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 });
  }

<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: Observable<any>;

return this.feed.switchMap((snapshots) => {
             let observableArray = [];
             snapshots.forEach(snapshot =>{
                 observableArray.push(this.pullFeedData(snapshot.val()));
             });
             return Observable.forkJoin(observableArray)
        })