Clarity設計樹視圖遞歸問題

Question

我已經開始使用Clarity Design Angular項目，並遇到了0.10.0-alpha中提供的Tree View遞歸模板的問題。

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

當遞歸檢查命中不包含陣列的匹配（但只是一個對象 - 見A1> B3> E3> F1）時，它未能呈現該信息並引起單擊插入符號後，任何可摺疊節都會複製子項的錯誤。

如果只有一個實例，如果發送JSON的API沒有將子項放入數組，則不知道如何解決此問題。遞歸應該考慮只有一個孩子存在的情況（並且不在數組內）。

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

}）

更換並嘗試此案件在同一掠奪者