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，如果它甚至沒有從標記中註釋代碼，所以你很好:)