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

时间:2017-10-16 19:09:40

标签: angular

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

1 个答案:

答案 0 :(得分:1)

你做到这一点的方式是接近它的最佳方式。这样做是没有性能损失的,因为你使用ng,如果它甚至没有从标记中注释掉代码,那么你很好:)