javascript - 带有 Angular 6 的第 n 个子项的层次结构下拉列表。我希望选择父复选框需要隐藏所有子复选框

Question

第 n 个子项的层次结构下拉列表的 Angular 为 6。我希望选择父复选框需要隐藏所有子复选框。我已经尝试到第 3 级。但我需要达到第 n 级请帮助我。我的代码。

应用程序组件.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>

Answer 1

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

基本上有两种不同的遍历树的可能性:深度优先，这意味着您从父节点开始到一个子节点，然后从那里到另一个子节点，直到您在没有任何子节点的节点结束。然后你回去对 sibling 重复同样的过程，依此类推。另一种是广度优先，您首先访问一个层次结构级别上的任何节点，然后继续到下一个层次结构。

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

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