如何将 ngfor 对象变量发送给函数

Question

我有一个 *ngFor 列表用于我的类别和内部列表我想显示子类别列表。来自 firebase 的子类别数据，所以我用 category_id 查询它。我的问题是我不知道如何将 category_id 从 html 传递给类别的每个成员。

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

}

Answer 1

因为不清楚你的数据是如何构建的，但你似乎同时获得了类别和子类别。稍微解决一下嵌套的 *ngFor、*ngIf 和 div 就可以解决问题。可能不是最佳做法：

TS文件

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>

如何将 ngfor 对象变量发送给函数

How to send a ngfor object variable to a function

typescript

ionic-framework

angular