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，如果它甚至没有从标记中注释掉代码，那么你很好：）

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

1 个答案: