Question

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

Answer 1

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

如果您按照文档中显示的方式实现它，例如{{3>}的文档的权限：数据，您的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: 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.
}

复选框树视图

1 个答案:

更新