2017-10-16 1 views
0

헬로우 스택 커뮤니티,
사용자의 태풍에 노출되지 않는 몇 가지 추가 세부 정보가있는 개체 배열이 있습니다. ngFor을 통해 배열에 사용 가능한 모든 객체를 표시하고 토글 버튼을 추가하여 각 배열 요소별로 세부 사항을 표시하거나 숨기려고합니다. 현재, 나는 다음과 같은 솔루션을 사용하고 있습니다 : 각 이벤트마다 배열의 I 세부 가시성을 구동 별도의 배열에 추가 boolean 값 저장 :
틀 :각도 2/4 목록 요소 세부 정보 표시 및 숨기기

<ul> 
    <li *ngFor="let schedule of schedulesList; let idx = index"> 
    <div> 
     {{schedule.beginDate}} to {{schedule.endDate}} 
     <span> 
     <i class="material-icons md-24" >{{configureMdIcon}}</i> 
     <i class="material-icons md-24" (click)="eventListVisibility($event, idx)">{{seeListMdIcon}}</i> 
     {{scheduleEventsListVisible}} 
     </span> 
     <div *ngIf="eventsVisible[idx]">Events: 
      <ul> 
       <li *ngFor="let event of schedule.additionalEvents"> 
       {{event.details}} 
       </li> 
      </ul> 
     </div> 
    </div> 
    </li> 
</ul> 

CONTROLER :

eventListVisibility(e: Event, idx: number){ 
    if(typeof this.eventsVisible != undefined){ 
     this.eventsVisible[idx] = !this.eventsVisible[idx]; 
    } 

이 코드 작품 하지만 제 질문은 :
더 영리한 방법이 있습니까? 가시성을 높이기 위해 추가 배열을 사용하는 것이 낭비이고 Angular를 아는 한이 문제를 해결할 숨겨진 기능이 일부있을 것입니다.
어떤 종류의 도움에 감사드립니다.

답변

1

당신이해온 방법이 그것을 접근하는 가장 좋은 방법입니다. 당신이 괜찮으므로 마크 업에서 코드에 주석을 달지도 않는 경우 ng를 사용하기 때문에 성능을 저하시킬 수는 없습니다. :)

+0

내 의견이 유용하다면 올바른 것으로 표시해주세요. 대답. –

관련 문제