角度2の折りたたみ可能なツリービューの作成

Question

角度2を学習する方法として、折りたたみ可能なツリービューを開発しています。今私はクリックされた特定の<li>アイテムに隠れたプロパティを適用する方法に固執しています。ここまで私がこれまで持っていたことがあります。

これは、リストに入るアイテムを表示するhtmlです。ここ

<div> 
    <ol> 
      <li *ngFor="let item of videoList"> 
       <div> 
        <a *ngIf="item.nodes && item.nodes.length > 0" (click)="toggle()">{{item.title}}</a> 
        <a *ngIf="item.nodes <= 0">{{item.title}}</a> 
       </div> 
       <ol [hidden]="!collapsed"> 
        <li *ngFor="let subItem of item.nodes"> 
         <a *ngIf="subItem.nodes && subItem.nodes.length > 0" (click)="toggle()">{{subItem.title}}</a> 
         <a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a> 
         <ol [hidden]="!collapsed"> 
           <li *ngFor="let video of subItem.nodes"> 
            <a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a> 
            <a *ngIf="video.nodes <= 0">{{video.title}}</a> 
           </li> 
         </ol> 
        </li> 
       </ol> 
      </li> 
    </ol> 
</div> 

と が崩壊するか、リストを拡張コンポーネントでtypescriptですです。

collapased = false; 

toggle() { 
    this.collapsed = !this.collapsed; 
    }  

現在、コードでは、トップレベル要素と第2レベル要素が一緒に折りたたまれ展開されています。リストの各項目を他の項目とは独立させる必要があります。私はまた、これを達成するためにCSSを使用してフォームから離れることを好みます。

Answer 1

あなたは、あなたが一度に一つの項目を切り替えることができ、あなたはフロントエンドモデルを使用していると仮定すると、あなたのフロントエンドモデルに新しいプロパティを追加する場合：

export class Item { 
    constructor (
     public nodes: Node[], 
     public hidden: boolean) {} 
} 

<div> 
    <ol> 
      <li *ngFor="let item of videoList"> 
       <div> 
        <a *ngIf="item.nodes && item.nodes.length > 0" (click)="item.hidden = !item.hidden">{{item.title}}</a> 
        <a *ngIf="item.nodes <= 0">{{item.title}}</a> 
       </div> 
       <ol [hidden]="!item.hidden"> 
… 

あなたがいない場合そのようなモデルを使用して、その後、私は一意のIDがあなたのデータが付属して何でも使って、それぞれに固有のIDタグを作成していると考えることができる唯一の他の事：

<a id="{{node.id}}"> </a> 

その後は、IDに基づいて、非表示と表示することができますそれらの要素の特性。私はアイデアがありませんが、他の誰かが助けてくれると確信しています！

Answer 2

それぞれのオブジェクトにプロパティがある場合は、それらのハードコードされたJavaScriptオブジェクトのリストがありますid: 1, title: something, collapsed: true, and nodes: []私は各ノードにcollapsedプロパティを追加し、自分のhtmlで次のことを行いました。

<div> 
    <ol> 
      <li *ngFor="let item of videoList"> 
       <div (click)="item.collapsed = !item.collapsed"> 
        <a *ngIf="item.nodes && item.nodes.length > 0">{{item.title}}</a> 
        <a *ngIf="item.nodes <= 0">{{item.title}}</a> 
       </div> 
       <ol > 
        <li *ngFor="let subItem of item.nodes" [hidden]="item.collapsed"> 
         <div (click)="subItem.collapsed=!subItem.collapsed"> 
           <a *ngIf="subItem.nodes && subItem.nodes.length > 0">{{subItem.title}}</a> 
           <a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a> 
         </div> 
         <ol> 
           <li *ngFor="let video of subItem.nodes" [hidden]="subItem.collapsed"> 
            <div> 
             <a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a> 
             <a *ngIf="video.nodes <= 0">{{video.title}}</a> 
            </div> 
           </li> 
         </ol> 
        </li> 
       </ol> 
      </li> 
    </ol> 
</div> 

基本的には、選択したノードの折りたたみプロパティを変更しています。