clr-tree-node 选择不影响折叠的子节点
clr-tree-node selection not effect collapsed child nodes
我已经基于 Clarity (v 0.13.1) 树视图构建了一个组件,
我在选择\取消选择折叠的父节点时遇到问题,
它不影响子节点的选择,
当我扩展他时,他又得到 selected\unselected。
有人可以帮忙吗?
下面是视图:
<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
}
]
}
]
}
您的根节点需要指向 selection
对象的布尔值 selected
属性。您将 clrSelected 绑定设置为整个对象,这会导致此行为。
<clr-tree-node class="tree-root" [(clrSelected)]="selection.selected" id="statusTreeFilter">
至此设置完成。 https://stackblitz.com/edit/clarity-hmrndh?file=app%2Fapp.component.html
已修复清晰度 1.0(重大更改)
我已经基于 Clarity (v 0.13.1) 树视图构建了一个组件,
我在选择\取消选择折叠的父节点时遇到问题, 它不影响子节点的选择, 当我扩展他时,他又得到 selected\unselected。
有人可以帮忙吗?
下面是视图:
<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
}
]
}
]
}
您的根节点需要指向 selection
对象的布尔值 selected
属性。您将 clrSelected 绑定设置为整个对象,这会导致此行为。
<clr-tree-node class="tree-root" [(clrSelected)]="selection.selected" id="statusTreeFilter">
至此设置完成。 https://stackblitz.com/edit/clarity-hmrndh?file=app%2Fapp.component.html
已修复清晰度 1.0(重大更改)