AngularFire2:使用 RxJS .map() 在 FirebaseListObservables 上执行“连接" [英] AngularFire2: Perform 'Joins' on FirebaseListObservables using RxJS .map()

问题描述

如另一个问题所述，我正在开发一个使用 Firebase 作为后端的 Ionic 2 应用.

As stated in another question, I'm developing an Ionic 2 App using Firebase as Backend.

我有类别，我有产品.产品属于类别.由于它是n 到 m"的关系，因此产品和类别存储在 firebase 中的单独节点中.我将数据结构如下:

I have categories and I have products. Products belong to categories. As it is a "n to m" relationship, products and categories are stored in separate nodes in firebase. I structured the data as follows:

Firebase 数据结构:

类别知道，哪些产品属于它们(键在每个类别的产品"节点中引用).产品知道它们属于哪些类别(键在prod_cat"节点中引用).但是，当我列出所有类别时，我只知道属于该类别的产品的 ID.在模板中，我需要显示更多详细信息，例如产品名称.

Categories know, which products belong to them (keys are referenced in "prods" node of each category). Products know, which categories they belong to (keys are referenced in the "prod_cat" node). However, when I list all categories I just know the IDs of the products which belong to the category. In the template I need to show more details, like the product name for example.

我阅读了许多类似的问题，并提出了将产品信息添加到类别的解决方案:

I read many similar questions an came up with this solution to add the product information to the categories:

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

不幸的是，这不起作用.正如代码中的注释一样，产品信息被正确收集并记录到控制台(参见以下屏幕截图):控制台截图

Unfortunately, this doesn't work. As written as comments in the code, the product information are collected correctly and logged to the console (see following screenshot): console screenshot

然而，上述函数返回的对象是undefined".

However, the returned object of the above function is "undefined".

当我尝试声明明确地返回 FirebaseListObservable 类型的对象时，我收到错误:

When I try to state, that explicitely an object of type FirebaseListObservable is to be returned, I receive the error:

Observable"类型不可分配给FirebaseListObservable"类型.'Observable' 类型中缺少属性 '$ref'.

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

有人知道我还能尝试什么吗?

Does anybody have an idea what else I could try?

在此先非常感谢您！

推荐答案

我解决了这个问题.

提供者 (*.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;
}

模板 ts 文件中的提供者调用:

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>

这篇关于AngularFire2:使用 RxJS .map() 在 FirebaseListObservables 上执行“连接"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！