角度 6 中带有第 n 个子项的层次结构下拉列表。我想选择父复选框需要隐藏所有子复选框

Posted 2023-03-05

【中文标题】角度 6 中带有第 n 个子项的层次结构下拉列表。我想选择父复选框需要隐藏所有子复选框

【英文标题】：Hierarchy dropdown with nth child in angular 6. I want select parent checkbox need hide all it children checkbox

【发布时间】：2021-07-10 13:13:27

【问题描述】：

在角度 6 中带有第 n 个子项的层次结构下拉列表。我想要选择父复选框需要隐藏所有子复选框。我已经尝试了3级。但我需要升到第 n 级请帮助我。我的代码。

app.component.ts

persons : any=[
  Id:1 , Name: 'Ram',checked:false, disable:false,
   children:[Id:1, Name: 'shyam', checked:false, disable:false, RID:1,
  children:[Id:1, Name: 'shyam1',checked:false, disable:false,  RID:1, 
  children :[Id:1, Name: 'Rambabu2', checked:false, disable:false,RID:1, 
  children:[Id:1, Name: 'shyam1',checked:false, disable:false,RID:1]]],
   Id:2, Name: 'Kumar',checked:false, disable:false, RID:1, children:[Id:1, Name: 'shyam',checked:false, disable:false,RID:1,],
    Id:3, Name: 'shyam3',checked:false, disable:false,RID:1,]
  ]



parentCheckbox(ev: any, node: any) 
  debugger;
  
  if (ev.target.checked) 
    this.disableAllChild(node)
   else 
  

disableAllChild(node: any) 
  debugger

  
  node?.children?.forEach((element:any) => 
    ;(element.checked = false), (element.disable = true)
    element?.children?.forEach((el:any) => 
      ;(el.checked = false), (el.disable = true)
    )
  )

app.componet.html

<ng-template #recursiveList let-persons>
  <tr *ngFor="let parents of persons">
    <td>
      <input
        type="checkbox"
        [disabled]="parents.disable"
        (change)="parentCheckbox($event, parents)"
      />
       parents.Name 
      <div > 
        <ng-container *ngTemplateOutlet="recursiveList; context: $implicit: parents.children ">
          <td>
          
      </td>
        <span
        class="level-2-checkbox"
        [ngClass]=" disableText: parents.children.disable "
      ></span>
        </ng-container>
      </div>
      </td>

    </tr>
    </ng-template>
    <ng-container *ngTemplateOutlet="recursiveList; context: $implicit: persons "></ng-container>

【参考方案1】：

如果我理解你的问题，你可以用一个简单的tree traversal 算法来解决这个问题。

遍历树本质上有两种不同的可能性：深度优先，这意味着您从父节点开始到一个子节点，然后从那里到另一个子节点，直到您在一个没有任何子节点的节点处结束。然后您返回并与兄弟姐妹重复相同的过程，依此类推。 另一种是广度优先，您首先访问一个层次结构级别上的任何节点，然后进入下一个层次结构。

对于您的示例，您可以使用深度优先算法的递归实现，例如：

interface Person
  Id:number;
  Name:string;
  checked:boolean;
  disable:boolean;
  children:Person[];


const persons : Person[]=[
  Id:1 , Name: 'Ram',checked:false, disable:false,
   children:[
     Id:1, Name: 'shyam', checked:false, disable:false, RID:1,
       children:[
         Id:1, Name: 'shyam1',checked:false, disable:false,  RID:1, 
            children :[
               Id:1, Name: 'Rambabu2', checked:false, disable:false,RID:1, 
                 children:[
                  Id:1, Name: 'shyam1',checked:false, disable:false,RID:1
                 ]
               
            ]
         
       ]
  ,
  Id:2, Name: 'Kumar',checked:false, disable:false, RID:1, 
   children:[
      Id:1, Name: 'shyam',checked:false, disable:false,RID:1
   ],
  Id:3, Name: 'shyam3',checked:false, disable:false,RID:1]
]

disableAllChild(node:Person)
  if(node == null) return;
  node.disable = true;
  //recursive call to disableAllChild for all children of the current node 
  node.children?.forEach(child => disableAllChild(child));