Блог

Я работаю с категориями, сначала я показываю родительские категории, и если у них есть дети, мне нужно показать детей и их детей. В настоящее время я делал это статически, но это вызвало у меня проблемы с условиями, так как, если бы я выбрал детей, отец был бы скрыт от меня, поэтому я хотел бы сделать это динамичным, так как мне нужно показать их вложенными.

Это метод, который вызывается при нажатии на радиобуттон

  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>