Issue
I have a *ngFor list for my categories and inside to list i wanna show subcategories list. subcategory data coming from firebase so i querying it with category_id. My problem is i dont know how to pass category_id from html to function for every member of category.
home.html
<ion-accordion *ngFor="let category of Categories">
<ion-item slot="header">
<ion-label>{{category.category_name}}</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item *ngFor="let category of SubCategories">
<ion-label> {{category.subcategory_name}}</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
home.ts
Product: Product[] = [];
Categories: Category[] = [];
SubCategories: SubCategory[] = [];
ShowSubCategories: SubCategory[] = [];
subcategory_category_id: number;
constructor( private dataService : DataService) {
this.dataService.getCategories().subscribe(res =>{
this.Categories=res;
})
this.dataService.getSubCategory().subscribe(res => {
this.SubCategories=res;
})
console.log(this.subcategory_category_id)
}
getSubCategoryById(id){
console.log(this.dataService.getSubCategoryById(id))
}
}
Solution
Because it is not clear how your data are structured, but you seem to be getting both categories and subcategories. A little work around with nested *ngFor, *ngIf and div could do the trick. Might not be the best practice :
TS file
Categories = [
{ id: 1, name: 'one' },
{ id: 2, name: 'two' },
];
Subcategories = [
{ id: 1, name: 'subone' },
{ id: 2, name: 'subtwo' },
];
HTML :
<div *ngFor="let cat of Categories">
<ion-item>Name : {{cat.name}} | id : {{cat.id}}</ion-item>
<div *ngFor="let subcat of Subcategories">
<ion-item *ngIf="subcat.id === cat.id">subcat id: {{subcat.id}} | subcat name: {{subcat.name}}</ion-item>
</div>
</div>
Answered By - uKioops
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.