Relief release of a tree of clarity

Question

I started using the Clarity Design Angular project and ran into a problem with the recursive Tree View template that was introduced in 0.10.0-alpha.

https://plnkr.co/edit/KK8rVH1xUGCO7VetgomA?p=preview

    selectableRoot = {
    "@name": "A1",
    "selected": false,
    "expanded": true,
    "children": [
        {
            "@name": "B1",
            "selected": false,
            "children": [
                { "@name": "C1" },
                { "@name": "C2" },
                { "@name": "C3" }
            ]
        },
        {
            "@name": "B2",
            "selected": true,
            "expanded": true,
            "children": [
                { "@name": "D1" },
                {
                    "@name": "D2",
                    "selected": false
                },
                { "@name": "D3" }
            ]
        },
        {
            "@name": "B3",
            "selected": true,
            "children": [
                { "@name": "E1" },
                { "@name": "E2" },
                { 
                  "@name": "E3",
                  "children":
                     { "@name": "F1" }
                }
            ]
        }
    ]
};

When a recursive check finds a match that does not contain an array (but only an object - see A1> B3> E3> F1), it cannot display this element and causes an error when any folded section duplicates children by clicking on the carriage.

You do not know how to fix this if the API that sends the JSON does not put the children in an array if there is only one instance. Recursion should take into account cases when there is only one child (and is not inside the array).

Answer 1

Raja Modamed , ( ngFor ).

https://plnkr.co/edit/OAujF19FPDqaEWvFfgN1?p=preview

@Component({
selector: "recursive-selectable-structure",
template: `
    <clr-tree-node [(clrSelected)]="item.selected">
        {{item.name}}
        <span *ngIf="item.children?.length > 0">
          <ng-template 
            [clrIfExpanded]="item.expanded" 
            *ngFor="let child of item.children">
              <recursive-selectable-structure
                  [item]="child">
              </recursive-selectable-structure>
          </ng-template>
        </span>
        <ng-template *ngIf="item && item.children && !item.children[0]" [clrIfExpanded]="item.children.expanded">
          <recursive-selectable-structure [item]="item.children">
          </recursive-selectable-structure>
        </ng-template>
    </clr-tree-node>
`

})

Answer 2

https://plnkr.co/edit/KK8rVH1xUGCO7VetgomA?p=preview " "

@Component({
selector: "recursive-selectable-structure",
template: `
    <clr-tree-node [(clrSelected)]="item.selected">
        {{item.name}}
        <recursive-selectable-structure *ngIf="item && item.children && !item.children[0]" [item]="item.children">

        </recursive-selectable-structure>
        <ng-template 
          [clrIfExpanded]="item.expanded" 
          *ngFor="let child of item.children">
            <recursive-selectable-structure
                [item]="child">
            </recursive-selectable-structure>
        </ng-template>
    </clr-tree-node>
`

})

Answer 3

.

https://clarity.design/documentation/tree-view#recursive-tree

<clr-tree>
  <clr-tree-node *clrRecursiveFor="let item of items; getChildren: getItemChildren"
                                 [(clrSelected)]="item.selected">
        {{item.name}}
  </clr-tree-node>
</clr-tree>

,

getTypeChildren = (typeNode) => typeNode.children;