Флажок в виде дерева

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: 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.
}