创建自定义复选框树视图组件 Angular

Posted 2023-02-23

【中文标题】创建自定义复选框树视图组件 Angular

【英文标题】：Create Custom Checkbox tree view component Angular

【发布时间】：2020-06-10 15:24:30

【问题描述】：

我想用复选框在 Angular 中创建树视图组件。 请在 -

找到我的代码

https://stackblitz.com/edit/angular-qvzr8c

在这里我可以在 UI 上渲染树视图。但是想实现功能-

选中父复选框时，应自动选中其所有子复选框。 当检查所有子组中复选框时，父节点CheKbox应自动选择。 最后需要所有选中复选框的列表。

这里如何将模型设置为复选框并实现上述功能。​

【参考方案1】：

请尝试使用this 插件。它会为你工作。

【参考方案2】：

首先你需要为你的 TreeNode 添加一个新的可选属性

interface TreeNode 
    label: string;
    check?:boolean; //<--this one
    children: TreeNode[];
  

你可以在输入中使用[ngModel]，和(ngModelChange)调用一个函数“selectNode”

 <label class="node__label">
        <input type="checkbox" [ngModel]="node.check" 
          (ngModelChange)="selectNode(node,$event)"/>
     node.label 
</label>

seletNode 是一个调用递归函数的函数：

  public selectNode( node: TreeNode,value:boolean ) : void 
        this.check(node,value)
  

  check(node:any,value:boolean)
  
    node.check=value;
    node.children.forEach(x=>
    
      this.check(x,value)
    )
  

你可以在这个stackblitz看到

但是您可以考虑@Dseroski 的建议，而不是重新发明***:)

【讨论】：

谢谢埃利塞奥。实际上，在这里我们想要创建完全自定义的树视图，没有其他插件可以使用。在这里，我还有一个问题，请建议 - 当孩子未被选中时，它的所有父母都会被取消选中。我该如何进行呢？请提出建议。

【参考方案3】：

Angular Material 有一个非常好的 Tree 模块。除了选中一个框的一些逻辑更改之外，此示例与您需要的非常相似。

https://stackblitz.com/angular/baxxqmgxmgq?file=src%2Fapp%2Ftree-checklist-example.ts