vmware-clarity - clr-tree-node 选择不影响折叠的子节点
问题描述
我已经构建了一个基于 Clarity (v 0.13.1) 树视图的组件,
我在选择\取消选择折叠的父节点时遇到问题,它不会影响子节点的选择,当我扩展他时,他又被选中\取消选择。
有人可以帮忙吗?
下面是视图:
<clr-tree-node class="tree-root" [(clrSelected)]="tree.selected" id="statusTreeFilter">
{{tree.name}}
<ng-template [(clrIfExpanded)]="tree.expanded">
<clr-tree-node *ngFor="let group of tree.childs" [(clrSelected)]="group.selected">
<span>{{group.name}}</span>
<ng-template [(clrIfExpanded)]="group.expanded">
<clr-tree-node *ngFor="let status of group.childs" [(clrSelected)]="status.enable">
<span>{{status.name}}</span>
<ng-template></ng-template>
</clr-tree-node>
</ng-template>
</clr-tree-node>
</ng-template>
和数据:
let tree = {
"name": "All",
"selected": true,
"expanded": false,
"childs": [
{
"name": "Generate",
"selected": true,
"expanded": false,
"childs": [
{
"name": "Init",
"enable": true
},
{
"name": "Generating",
"enable": true
},
{
"name": "Generated",
"enable": true
}
]
},
{
"name": "Printing",
"selected": true,
"expanded": false,
"childs": [
{
"name": "Printing",
"enable": true
}
]
},
{
"name": "Finalized",
"selected": true,
"expanded": false,
"childs": [
{
"name": "Completed",
"enable": true
},
{
"name": "Cancelled",
"enable": true
}
]
}
]
}
解决方案
您的根节点需要指向对象的布尔selected
属性selection
。您正在将 clrSelected 绑定设置为整个对象,这会导致此行为。
<clr-tree-node class="tree-root" [(clrSelected)]="selection.selected" id="statusTreeFilter">
在这里它已完全设置。https://stackblitz.com/edit/clarity-hmrndh?file=app%2Fapp.component.html
推荐阅读
- teradata - multiple Case statement in a query
- linux - 从 /proc 文件系统或等效内核 API 获取 PID 的所有递归子进程的最佳方法?
- c# - C# Selenium findElements by XPath returns null
- c# - 如何动态获取程序集名称
- java - How to produce map with distinct values from a map (and use the right key using BinaryOperator)?
- drools - 新工作台测试场景支持 Java 日期/时间类?
- c - 我应该如何让用户输入我想要的信息?
- .net - .net core 3:针对不同环境配置DI容器
- azure - 如何在 azure 虚拟机中获取 DNS 名称 - 列出所有 api?
- xml - 如何在 XML 模式中添加一个仅显示一些可能值的附加元素