RxJS Observables在订阅或异步时不显示数据

问题描述

我正在尝试将firestore-collection和subcollection中的所有数据转换为observable形式的array，并使用async管道显示.

I am trying to get all the data from firestore - collection and subcollection into an observable form of array and display it with async pipe.

availableCategoriesCollection: AngularFirestoreCollection<Category>;
availableCategories$: Observable<CategoryId[]>;
lstCategories: Observable<any>;

this.availableCategoriesCollection = this.httpDataService.getAllCategories();
this.availableCategories$ = this.availableCategoriesCollection.snapshotChanges().map(data => {
  return data.map(record => {
    const rec = record.payload.doc.data() as Category;
    const cId = record.payload.doc.id;
    return {cId, ...rec};
  });
});
this.lstCategories = this.availableCategories$.mergeMap(data => {
  const observables = data.map((rec: CategoryId) => {
    if (rec.hasSubCat) {
      return this.httpDataService.getSubCategory(rec.cId).snapshotChanges().map(d => {
        return d.map(r => {
          const arr: any = {};
          arr.id = r.payload.doc.id;
          arr.itemName = (r.payload.doc.data() as Category).categoryName;
          arr.category = rec.categoryName;
          return Observable.of(arr);
        });
      });
    }else {
      const arr: any = {};
      arr.id = rec.id;
      arr.itemName = rec.categoryName;
      arr.category = 'All';
      return Observable.of(arr);
    }
  });
  return Observable.forkJoin(observables);
});

并且我已经使用<pre>{{lstCategories | async | json}}</pre>来显示数据，但是它始终为空.

and I've used <pre>{{lstCategories | async | json}}</pre> to display the data, but it is always null.

当我console.log(observables)在forkJoin之前时，我得到(9) [ScalarObservable, Observable, Observable, ScalarObservable, ScalarObservable, ScalarObservable, ScalarObservable, ScalarObservable, Observable]，其中有3个属于Observable的是子类别，而其中6个属于ScalarObservable的是主要类别.

When I console.log(observables) before forkJoin I get (9) [ScalarObservable, Observable, Observable, ScalarObservable, ScalarObservable, ScalarObservable, ScalarObservable, ScalarObservable, Observable] out of which 3 of them which are Observable are subcategories and 6 of them which are ScalarObservable are main categories.

尽管有这些数据，但lstCategories却无法通过async进行更新.

In spite of this data, the lstCategories doesn't get updated via async.

我也曾尝试像那样订阅lstCategories

this.lstCategories.subscribe(data => {
     console.log(data);
});

，但是上面的日志永远不会发生，这意味着它没有被订阅.我对rxjs的了解非常薄弱.希望在这里找到帮助.

but the above log never happens which means it is not getting subscribed. My knowledge on rxjs is very weak. Hope to find some help here.

推荐答案

尝试这种方式

this.lstCategories = this.availableCategoriesCollection.snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Category;
        if(data.hasSubCat){
          const signupId = a.payload.doc.id;
          return this.httpDataService.getSubCategory(signupId).snapshotChanges().map(actions => {
            return actions.map(d => {
              return d;
            });
          }).map(signup => {
            return signup.map(md => {
              const arr: any = {};
              arr.id = md.payload.doc.id;
              arr.itemName = (md.payload.doc.data() as Category).categoryName;
              arr.category = data.categoryName;
              return arr;
            });
          });
        }else {
          const arr: any = {};
          arr.id = a.payload.doc.id;
          arr.itemName = data.categoryName;
          arr.category = 'All';
          return Observable.of(arr);
        }
      });
    }).flatMap(records => Observable.combineLatest(records)).map(data => {
      return [].concat(...data).map(d => {
        return d;
      })
    });

这篇关于RxJS Observables在订阅或异步时不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！