角度2で再帰的なツリービューを展開/折りたたむ方法は？

Question

私はこのAngularJS 1 demoから拡大/縮小機能を再現しようとしています（私は再帰的なビューを使用しています）。しかし、私の試みは常に1つ以上のノードを展開します。

角度2で適切な展開/折りたたみ機能を実現するにはどうすればよいですか？

は、ここに私の現在のコードです：http://plnkr.co/edit/KmLDb1ba3WYp3X6snnmg?p=preview

Answer 1

彼らが見えているかどうかをチェックするためのノードにプロパティを追加します。

import {Component, Input} from '@angular/core'; 

@Component ({ 
    selector: 'tree-view', 
    template: ` 
    <ul> 
     <li *ngFor="let node of treeData"> 
      <span *ngIf="node.children?.length" (click)="toggleChildren()">[+]</span> 
      {{node.name}} 
      <tree-view [treeData]="node.children"></tree-view> 
     </li> 
    </ul> 
    ` 
}) 
export class TreeView { 
    @Input() treeData: any[]; 

    toggleChildren() { 
     // to do 
    } 
} 

は、ここですべてとPlunkerです。あなたがそれらを見せているならば、あなたはそれらを隠します。

これは、実装方法の簡単な例です。ノードが表示されているときに[-]のアイコン[+]を変更して、このアイコンを改善することができます。

import {Component, Input} from '@angular/core'; 

@Component ({ 
    selector: 'tree-view', 
    template: ` 
    <ul> 
     <li *ngFor="let node of treeData"> 
      <span *ngIf="node.children?.length" (click)="toggleChildren(node)">[+]</span> 
      {{node.name}} 
      <tree-view [treeData]="node.children" *ngIf="node.visible"></tree-view> 
     </li> 
    </ul> 
    ` 
}) 
export class TreeView { 
    @Input() treeData: any[]; 


    toggleChildren(node: any) { 
     // to do 
     node.visible = !node.visible; 

    } 
}