Angular 2/4列表显示和隐藏元素详细信息

Question

Hellow Stack社区，
我有一个对象数组，它可能有一些额外的细节，我不会在开始时暴露给用户。 我通过ngFor在数组中显示所有可用的对象，我希望添加一个切换按钮来显示/隐藏每个数组元素的详细信息。目前，我用以下解决方案：每个事件在阵列我存储在独立的阵列驱动细节的知名度额外boolean值：
模板：

<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将会有一些隐藏功能来解决这个问题。
谢谢你的任何帮助

Answer 1

你做到这一点的方式是最好的方法来处理它。这样做没有性能损失，因为你使用的是ng，如果它甚至没有从标记中注释代码，所以你很好:)