問題描述

對于社交媒體應用程序，我有一組使用 AngularFire 2 由其 ID 引用的提要對象.一旦這些 ID 中的每一個都從存儲實際提要對象的數據庫中提取了相關數據，我希望使用此信息更新 feedCards 可觀察對象，以便我可以異步顯示提要對象的集合.HTML.這是一個相當混亂的事件鏈，所以讓我為你總結一下.

循序漸進的方法

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

<塊引用>

什么有效

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

• 基本上其他的.

什么不起作用

• feed.map(... 不會更新 feed 數組，因為 pullFeedData(number) 會異步拉取并返回 feedData.因此, alert(JSON.stringify(data)); in displayFeed() 警報 [null].

代碼

feed.ts

 userProfile:any;提要:FirebaseListObservable<any>;feedData: FirebaseObjectObservable<any>;feedCards:可觀察的<any[]>；構造函數(公共數據庫:AngularFireDatabase，公共 nativeStorage:NativeStorage){}displayFeed():無效{this.nativeStorage.getItem('twiner').then((res) => {this.userProfile = res;this.feedCards = this.loadFeed();this.feedCards.subscribe((數據)=>{警報(JSON.stringify(數據))；})});}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)=>{警報(JSON.stringify(feedData))；返回飼料數據；});})).延遲(1000);}pullFeedData(麻線:數字):任何{return this.db.object('/twines/' + twine, { preserveSnapshot: true });}

feed.html

<塊引用>

總結

feed.map 不會用 feed 對象更新 feed，因為新數據是異步提取的.我需要解決這個問題.

謝謝！

訂閱的 observable 沒有返回值.它返回一個 Subscription 對象，您可以稍后使用它來取消訂閱.

您可以在調用過程中使用 switchMap 從第一個 observable 切換到下一個 observable 并返回值.你也可以使用 forkJoin 來調用一個 observables 數組并等到值數組在訂閱中返回.首先將 feed 類變量聲明為 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)
        })