각도 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> 

및 붕괴 또는 목록을 확장 구성 요소에서 타이프 라이터입니다.

collapased = false; 

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

현재 코드는 최상위 요소와 두 번째 수준 요소를 함께 축소 및 확장합니다. 목록의 각 항목을 다른 항목과 독립적으로 만들 필요가 있습니다. 나는 또한 이것을 달성하기 위해 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: [] 각 노드에 축소 된 속성을 추가하고 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> 

기본적으로 나는 선택된 노드의 축소 된 속성을 변경하고 있습니다.