ノードオープニング/基本的なツリービューのためのロジックを閉じる

Question

だから私はちょうどディレクトリ構造を一覧表示するには、基本的なツリービューを作ってるんだ有する構成要素：

MyTreeMenuComponent [活字]（親）：

@Component({ 
    selector: 'mytree-menu', 
    template: `<div style="margin-left:30px"> 
       <mytree [treeItems]="treeItems"> Loading.. </mytree> 
       <ng-content></ng-content> 
      <div>`, 
}) 

export class MyTreeMenuComponent implements OnInit { 
    treeItems: any; 
    constructor(private http: Http, @Inject('BASE_URL') private baseUrl: string){} 

    ngOnInit() { 
    this.fetchFileList(); // function assigns directory listing to `treeItems` 
    } 
} 

MyTreeComponent [活字体]（子）：

@Component({ 
    selector: 'mytree', 
    templateUrl: './mytree.component.html', 
}) 

export class MyTreeComponent { 
    @Input() treeItems: any; 
    constructor(public omni: OmniService) { } 
    setSelection(val: any) { 
    this.omni.selectedFile = val; 
    } 
} 

MyTreeComponent [HTML]：HTMLファイルで

<li *ngFor="let item of treeItems?.children"> 
    <a (click)="showList = !showList; setSelection(item)"> 
    {{ item?.name + (item?.isFile ? "" : " [" + item?.size + "]") }} 
    </a> 
    <ul *ngIf="showList"> 
    <mytree [treeItems]="item"></mytree> 
    </ul> 
</li> 

は、あなたは木がある限り、それは子供を持っているように、サブノードを使用して作成され続けているように、それは再帰作られて見ることができます。それはかなり基本的なものであり、私はファンシーな機能を望んでいないので、私は第三者のオプションのために行くつもりはありません。欠陥のあるノードのオープン/クローズロジックに除いて罰金、を作品すべて：ノード上

クリックすると開きます/それは、隣接するノードです閉じます。ここで間違っているのは何ですか？また、クリックされたノードだけが開く/閉じるように、HTMLやTypeScriptで何ができるのでしょうか？

Answer 1

解決策を見つけました！

item

追加されたインタフェースと、その後のbo​​olean isExpanded：

MyTreeComponent [HTML]：

<li *ngFor="let item of treeItems?.children"> 
    <a (click)="setSelection(item)"> 
    {{ item?.name + (item?.isFile ? "" : " [" + item?.size + "]") }}</a> 
    <!-- Replace `*ngIf="showList"` with `*ngIf="item.isExpanded"` --> 
    <ul *ngIf="item.isExpanded"> 
    <mytree [treeItems]="item"></mytree> 
    </ul> 
</li> 

MyTreeComponent [活字体]（子）：

//codes above 
setSelection(val: any) { 
    this.omni.selectedFile = val; 
    val.isExpanded = !val.isExpanded; //added this 
} 

今はすべて正常に動作します。