Clarity Design Tree View Problème récursif

Question

J'ai commencé à utiliser le projet Clarity Design Angular et j'ai rencontré un problème avec le modèle récursif Tree View fourni avec le 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" } 
       } 
      ] 
     } 
    ] 
}; 

Une fois la vérification récursive frappe un match qui ne contient pas un tableau (mais juste un objet - voir A1> B3> E3> F1), il ne rend pas cet élément et provoque une bug où toute section pliable duplique les éléments enfants en cliquant sur le curseur.

Vous ne savez pas comment résoudre ce problème si une API qui envoie le JSON ne place pas les enfants dans un tableau s'il n'existe qu'une seule instance. La récursivité doit tenir compte des instances où un seul enfant existe (et n'est pas dans un tableau).

Answer 1

J'ai été capable de le résoudre à partir de l'entrée de Raja Modamed et l'ajout d'une vérification supplémentaire sur le bit récursif pour l'empêcher d'accéder aux enfants sans tableau (ce qui empêche l'erreur ngFor et renvoie la fonctionnalité aux bascules).

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

Ajouter un plus récursion conditionnel pour le cas de l'objet dans https://plnkr.co/edit/KK8rVH1xUGCO7VetgomA?p=preview remplacer ce code dans le composant "structure récursive sélectionnable"

@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> 
` 

})

Remplacer et essayer cette cas dans le même plunker