Question

我正在尝试将firestore - collection和subcollection的所有数据转换为observable形式的array，并将其显示为{{1}管道。

async

我使用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>之前console.log(observables)我得到forkJoin时，其中3个(9) [ScalarObservable, Observable, Observable, ScalarObservable, ScalarObservable, ScalarObservable, ScalarObservable, ScalarObservable, Observable]是子类别，其中6个是Observable主要类别。

尽管有这些数据，但lstCategories并未通过ScalarObservable更新。

我也试过订阅async喜欢

lstCategories

但上面的日志永远不会发生，这意味着它没有被订阅。我对this.lstCategories.subscribe(data => { console.log(data); });的了解非常薄弱。希望在这里找到一些帮助。

Answer 1

您似乎在以下代码块中返回某个数组Observable的{{1}}

Observable

此块已经在Observable的map函数中。当您返回另一个Observable时，整个返回对象看起来像map(d => ... arr.id = r.payload.doc.id; arr.itemName = (r.payload.doc.data() as Category).categoryName; arr.category = rec.categoryName; return Observable.of(arr); ... 只需将返回行更改为Observable<Observable<any[]>>

即可

Answer 2

试试这种方式

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

Answer 3

使用map时，可以转换请求的响应。你不需要返回Observalbe

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 arr  //<--simply return arr
          // return Observable.of(arr); <--I think it's WORNG
        });

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

3 个答案: