vmware-clarity - 复选框树视图

Question

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

Answer 1

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

如果您像文档中所示的那样使用权限实现它：所选树的文档的数据，您的 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>

您可以像这样为clrSelected @Output添加/使用脱糖语法来检查tree-node选择了哪个

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

并将您的权限减少到仅checkForChanges().

更新

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

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

因此，例如，假设您的组件中有一个 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.
}