角度依赖复选框未按预期工作

问题描述

我正在处理一个 Angular 项目，但在我的项目中显示动态嵌套复选框时遇到了一些问题。

有一个包含主类别的事件列表，每个类别包含一个子类别，我想在主类别的 for 循环之外显示主类别的子类别。我是菜鸟，请多多包涵。

这是我目前的代码部分

component.ts

SubCategoryList() {

    this.categoryService.customerSubCategories().subscribe(response => {

      this.childern = response;
      this.listofOption = this.childern;
      console.log(this.listofOption);
    })

  }

 filterSubById(id) {

    this.lists = this.listofMainCategories.filter((item:SubCategory) => id.includes(item.mainCategoryId));
    console.log(this.lists);
  }

和 component.html

    <div class="container" style="margin-left: 25px;"> 

        <h2>Select your Main Category</h2>
        <ng-container *ngFor="let item of maincat">
        <h3>{{item.name}}</h3>
        <nz-checkBox-wrapper style="width: 100%;" (nzOnChange)="filterSubById($event)">
          <div nz-row>
            <div class="row" nz-col nzSpan="8" *ngFor="let data of item.eventMainCategories">
              <label nz-checkBox [nzValue]="data.mainCategoryId" (ngModel)="customer?.customerMainCategories.MainCategoryId">{{data?.mainCategory?.name}} </label>
            </div>
          
          </div>
         
        </nz-checkBox-wrapper>
        
      </ng-container>


        <br><br>
          
        <h2>Select your Sub Category</h2>

        <nz-checkBox-wrapper style="width: 100%;" (nzOnChange)="filterProdById($event)">
             <div class="container">
              <!-- <h3>{{data?.mainCategory?.name}}</h3> -->
            </div>
          <div nz-row>
            <div class="row" nz-col nzSpan="8" *ngFor="let d of lists;">
              <label nz-checkBox [nzValue]="d.id" (ngModel)="customer?.customerSubCategories.subCategoryId">{{d?.name}} </label>
              
            </div>
          
          </div>
         
        </nz-checkBox-wrapper>
      </div>
</div>

有什么解决办法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）