Выбор узла clr-tree не влияет на свернутые дочерние узлы - PullRequest
Новая
       15

Выбор узла clr-tree не влияет на свернутые дочерние узлы

0 голосов
/ 03 июля 2018

Я построил компонент на основе дерева ясности,

У меня проблема при выборе \ отмене выбора свернутого родительского узла, это не влияет на выбор дочерних узлов, и когда я расширяю его, он снова выбирается \ не выбирается.

Может кто-нибудь помочь, пожалуйста?

ниже вид: 

<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
      }
    ]
  }
]

}

1 Ответ

0 голосов
/ 03 июля 2018

Ваш корневой узел должен указывать на логическое свойство 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

...