javascript - 如何以角度显示动态嵌套的单选按钮？

Question

我使用类别，首先我显示父类别，如果他们有孩子，我需要显示孩子和他们的孩子。目前我是静态地做的，但它给我的条件带来了问题，因为如果我选择孩子，父亲会对我隐藏，所以我想让它动态，因为我需要显示它们嵌套。

这是单击单选按钮时调用的方法

 onUpdateQueryProperty(queryProperty, value) {
    console.log(this.query[queryProperty], value)
    this.query[queryProperty] = value;
    this.valSelected = value;
    console.log(this.valSelected);
    this.applyQuery();
  }

这是我嵌套类别的 html 部分

<li class="my-1" *ngFor="let category of nestedCategories$ | async; let indice = index">
   <p-radioButton 
      id="categ" 
      name="category" 
      [value]="category.id" 
      [(ngModel)]="this.query.categoryId"
      [label]="category.name" 
      (onClick)="onUpdateQueryProperty('categoryId', category.id)">
   </p-radioButton>
   <div *ngIf="category.children">
      <li class="my-1 mx-4" *ngFor="let hijo of category.children">
         <div *ngIf="valSelected == category.id? valSelected == category.id: valSelected == hijo.id">
             <p-radioButton 
                 name="hijo" 
                 [value]="hijo.id" 
                 [(ngModel)]="this.query.categoryId" 
                 [label]="hijo.name"
                 (onClick)="onUpdateQueryProperty('categoryId', hijo.id)">
             </p-radioButton>
         </div>
         <div *ngIf="hijo.children">
             <li class="my-1 mx-4" *ngFor="let doble of hijo.children">
                 <div *ngIf="valSelected == hijo.id? valSelected == hijo.id: valSelected == doble.id">
                     <p-radioButton 
                         name="doble" 
                         [value]="doble.id" 
                         [(ngModel)]="this.query.categoryId" 
                         [label]="doble.name"
                         (onClick)="onUpdateQueryProperty('categoryId', doble.id)">
                     </p-radioButton>
                 </div>
             </li>
         </div>
     </li>
  </div>
</li>

标签： javascriptangular