复选框树视图

Question

我是清晰度设计的新手。我正在尝试实现复选框树视图。但我无法读取用户在树视图中选择的值，即无法实现双向绑定。我正在尝试使用 ngModel 和 ngValue 来做到这一点。你能帮忙吗？

Answer 1

您似乎正在尝试实施 <clr-tree-node [(clrSelected)]="selected"> 功能。

如果您像文档中显示的那样实现它，并使用 权限： 数据 Selected Tree 的文档，您的 HTML 将如下所示:

<clr-tree-node
    *ngFor="let permission of permissions"
    [(clrSelected)]="permission.selected">
        {{permission.type}}
    <ng-template [(clrIfExpanded)]="permission.expanded">
        <clr-tree-node *ngFor="let right of permission.rights" [(clrSelected)]="right.enable">
            {{right.name}}
        </clr-tree-node>
    </ng-template>
</clr-tree-node>

您可以 add/use 对 clrSelected @Output 的语法进行去糖处理，以检查选择了哪个 tree-node

<clr-tree-node [clrSelected]="selected" (clrSelectedChange)="checkForChanges()">

并将您的权限降低到仅 checkForChanges() 中选定的节点。

更新

对于权限数组，很容易用这一行过滤掉未选择的节点：

permissions.filter(item => item.selected);

因此，例如，假设您在组件 selected: Array<any> = [];

中选择了属性

然后，您的更改检查可能如下所示

checkForChanges() {
    this.selected.length = 0; // clear the selected array
    this.selected = permissions.filter(item => item.selected); // Reduce the array to only selected items.
}

复选框树视图

Checkbox tree-view

vmware-clarity

更新