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:
类别知道,哪些产品属于它们(键在每个类别的prods节点中引用)。产品知道它们属于哪些类别(键在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
但是,上述函数的返回对象是未定义。
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;
}
tempaltes ts-file中的提供商调用:
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屋!