Angular中如何获取动态嵌套复选框的选中值

一、推荐嵌套节点JSON结构 #

每个层级的节点统一使用如下字段结构，兼顾渲染、状态绑定、取值需求：

interface CheckboxNode {
  id: number | string; // 节点唯一标识
  label: string; // 复选框展示文本
  isChecked: boolean; // 选中状态，直接和复选框双向绑定
  children?: CheckboxNode[]; // 子节点数组，无下级则不填
}

示例结构参考：

[
  {
    "id": 1,
    "label": "一级选项1",
    "isChecked": false,
    "children": [
      {
        "id": 11,
        "label": "二级选项1-1",
        "isChecked": false,
        "children": [
          {"id": 111, "label": "三级选项1-1-1", "isChecked": false}
        ]
      }
    ]
  }
]

二、选中值获取逻辑 #

1. 渲染时直接给每个复选框绑定[(ngModel)]="node.isChecked"，递归渲染子节点时也沿用这个绑定规则即可
2. 写递归方法遍历整个节点树，收集所有选中的节点：

// 入参为根节点数组，返回选中的节点列表
getCheckedNodes(nodes: CheckboxNode[]): CheckboxNode[] {
  let result: CheckboxNode[] = [];
  nodes.forEach(node => {
    if (node.isChecked) {
      result.push(node);
    }
    if (node.children?.length) {
      result = result.concat(this.getCheckedNodes(node.children));
    }
  });
  return result;
}

如果只需要获取选中节点的id数组，修改上面的遍历逻辑收集node.id即可。

三、可选优化（父子联动） #

可以给复选框添加change事件绑定，实现父子级选中状态联动：

• 父节点切换选中状态时，遍历所有子节点同步修改isChecked值
• 子节点切换状态时，向上遍历父节点，根据所有子节点的选中状态更新父节点的选中/半选状态

内容的提问来源于stack exchange，提问作者jordan dap