How to send a ngfor object variable to a function-CodePudding

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

}

CodePudding user response：

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>