Clarity Design复选框树视图双向绑定求助：无法读取选中值

刚接触Clarity的时候确实容易在树组件的绑定上踩坑，别着急，咱们一步步来搞定这个复选框树的双向绑定和选中值读取问题。

Clarity的复选框树视图**不直接用ngModel和ngValue**来做绑定，它有自己专门的双向绑定语法，核心是利用clr-tree-node的[(clrSelected)]属性，结合树的复选框配置来实现。

第一步：准备树节点数据结构 #

首先你需要给每个树节点定义一个用于标记选中状态的属性（比如selected），示例数据如下：

// 组件类中的树数据
treeNodes = [
  {
    id: 1,
    name: "父节点1",
    selected: false,
    children: [
      { id: 11, name: "子节点1-1", selected: false },
      { id: 12, name: "子节点1-2", selected: false }
    ]
  },
  {
    id: 2,
    name: "父节点2",
    selected: false,
    children: [
      { id: 21, name: "子节点2-1", selected: false },
      { id: 22, name: "子节点2-2", selected: false }
    ]
  }
];

第二步：模板中配置复选框树并绑定状态 #

在模板里，你需要给clr-tree添加[clrTreeCheckboxes]="true"来启用复选框，然后给每个clr-tree-node绑定[(clrSelected)]到节点的selected属性：

<clr-tree [clrTreeCheckboxes]="true">
  <ng-template #treeNodeTemplate let-node>
    <clr-tree-node [(clrSelected)]="node.selected">
      {{ node.name }}
      <!-- 递归渲染子节点 -->
      <ng-container *ngIf="node.children && node.children.length > 0">
        <ng-template [ngTemplateOutlet]="treeNodeTemplate" [ngTemplateOutletContext]="{ $implicit: child }" *ngFor="let child of node.children"></ng-template>
      </ng-container>
    </clr-tree-node>
  </ng-template>

  <!-- 渲染根节点 -->
  <ng-template [ngTemplateOutlet]="treeNodeTemplate" [ngTemplateOutletContext]="{ $implicit: node }" *ngFor="let node of treeNodes"></ng-template>
</clr-tree>

第三步：读取所有选中的节点 #

现在你可以通过遍历树数据，收集所有selected为true的节点。比如写一个方法来获取选中值：

// 组件类中的方法
getSelectedNodes(): any[] {
  const selected: any[] = [];
  const traverse = (nodes: any[]) => {
    nodes.forEach(node => {
      if (node.selected) {
        selected.push(node);
      }
      if (node.children && node.children.length > 0) {
        traverse(node.children);
      }
    });
  };
  traverse(this.treeNodes);
  return selected;
}

// 比如在按钮点击时调用
onGetSelected() {
  const selectedNodes = this.getSelectedNodes();
  console.log("选中的节点：", selectedNodes);
}

额外提示：父子节点联动 #

如果需要实现父节点选中时自动选中所有子节点，子节点全选时父节点自动选中的联动效果，Clarity已经内置了这个功能，只要你正确绑定了[(clrSelected)]，并且启用了clrTreeCheckboxes，这个联动会自动生效，不需要额外写逻辑。

如果你的场景比较特殊，需要自定义联动逻辑，也可以监听clrSelectedChange事件来手动处理：

<clr-tree-node [(clrSelected)]="node.selected" (clrSelectedChange)="onNodeSelectedChange(node, $event)">
  {{ node.name }}
</clr-tree-node>

然后在组件类中实现onNodeSelectedChange方法来处理父子节点的选中状态同步。

内容的提问来源于stack exchange，提问作者Nithin Karthik