AngularFire2：RxJS .map（）を使ってFirebaseListObservablesで 'Joins'を実行

Question

別の質問で述べたように、Firebaseをバックエンドとして使用してIonic 2 Appを開発しています。

カテゴリがあり、商品があります。製品はカテゴリに属します。それは「n to m」関係であるため、製品とカテゴリはfirebase内の別々のノードに格納されます。

Firebase data structure:

カテゴリーは知っている、製品が（キーが各カテゴリの「PRODS」ノードで参照されている）それらに属する次のように私は、データを構造化。プロダクトは、どのカテゴリに属しているかを知っています（キーは「prod_cat」ノードで参照されます）。 しかし、すべてのカテゴリをリストすると、そのカテゴリに属する​​製品のIDだけがわかります。テンプレートでは、たとえば商品名のような詳細を表示する必要があります。

私は多くの類似の質問を読んで、ANカテゴリに製品情報を追加するには、この解決策を考え出した：

getProductsOfCategory(catId){ 
    this.productsOfCategory = this.af.database.list('/categories/'+catId+'/prods'); 

    return this.productsOfCategory 
    .map(products => { 
     console.log(products); // works fine: an object containing the relevant product information is logged to the console (see screenshot) 
     products.map(product => { console.log(product.$key); // works fine: the IDs of the products are logged to the console 
     product.prod_details = this.af.database.object('/products/'+product.$key); // seems not to work. Returned value: undefined 
     }); 
    }); 

残念ながら、これは動作しません。コード内のコメントのように書くよう は、製品情報（次のスクリーンショットを参照）が正しく収集され、コンソールに記録されている： console screenshot

しかしながら、上記関数の返されたオブジェクトが「不定」です。

私は状態にしようと、その明示的にタイプFirebaseListObservableのオブジェクトが返される、私はエラーが表示されます。

Type 'Observable' is not assignable to type 'FirebaseListObservable'. Property '$ref' is missing in type 'Observable'.

誰もが私は試みることができる他に何のアイデアを持っていますか？

ありがとうございます！

Answer 1

私はこの問題を解決しました。

プロバイダ（* .TS）：tempaltesのTSファイルで

getProductsOfCategory(catId){ 
    let result = this.af.database.list('/categories/'+catId+'/prods') 
    .map(items => { 
     for (let product of items) { 
     this.af.database.object('/products/'+product.$key) 
     .subscribe(data => { 
      product.details = data; 
     }); 
     } 
     return items;   
    })  
    return result; 
} 


getCategoriesAndProducts(){ 
    let result = this.af.database.list('/categories') 
    .map(items => { 
     for (let category of items) { 
     this.getProductsOfCategory(category.$key) 
     .subscribe(data => { 
      category.productDetails = data; 
     }) 
     } 
     return items; 
    }) 
    return result; 
} 

プロバイダコール：

getCategoriesAndProducts(){ 
    this.categoryService.getCategoriesAndProducts() 
     .subscribe(data => { 
      this.categoriesAndProducts = data; 
}); 

テンプレート/ビュー（* .htmlの）：

<ng-container *ngFor="let cat of categories"> 
    <ng-container *ngIf="cat.parent_cat === 'noParentCategory'"> 
    <h3> 
     {{cat.cat_name}} 
    </h3> 
    <ng-container *ngFor="let subcat of categoriesAndProducts"> 
     <ion-list> 
     <ng-container *ngIf="subcat.parent_cat === cat.$key">    
      <ion-item-divider> 
      {{subcat.cat_name}} 
      </ion-item-divider> 
      <ion-item *ngFor="let prod of subcat.productDetails"> 
      {{prod.details?.prod_name}} 
      </ion-item> 
     </ng-container> 
     </ion-list> 
    </ng-container> 
    </ng-container> 
</ng-container>