Angular 7在* ngFor列表中显示和隐藏子项

Question

我有一个事件列表，并希望在用户点击事件时显示/隐藏每个事件的详细信息。不确定如何进行。我可以显示或隐藏所有事件，但不能显示单个事件。寻找最简单的答案;到目前为止我发现的SO通常都非常复杂，通常比我的问题更复杂。

  <div *ngFor = "let event of events; index as i" class="event-list">
    <section class = "event-item">
        <h1 class = "event-name">{{ event.name }} </h1>
    </section>

    <!-- WANT TO SHOW THIS WHEN ABOVE SECTION ELEMENT IS CLICKED -->
    <section id="event_details_{{i}}" class="event-details">
      <p>Details</p>
    </section>
    <!-- END SHOW/HIDE SECTION -->

  </div>

我真的只是不确定如何在这里继续。我已经尝试了一些可能是Angular 1x技巧，但是他们毫无疑问地没有用。我不想依赖于使用JQuery进行黑客攻击，我宁愿使用Angular解决方案。谢谢！

这与我尝试过的一致，但我无法弄清楚如何在视图中分配toggleDetails [i]。

  <div *ngFor = "let event of events; index as i" class="event-list">

     <span [toggleDetails[i]] = false ]></span> // if I could do this somehow it'd work but this obviously doesn't.

    <section class = "event-item" (click)="toggleDetails[i]=!toggleDetails[i]">
      <div class="event-summary">
        <h1 class = "event-name">{{ event.name }} </h1>
      </div>
    </section>

    <!-- WANT TO SHOW THIS WHEN ABOVE SECTION ELEMENT IS CLICKED -->
    <section id="event_details_{{i}}" class="event-details" *ngIf="toggleDetails[i]">
      <p>Details</p>
      <p>Details</p>
      <p>And deets</p>
    </section>
    <!-- END SECTION -->

  </div>

Answer 1

最简单的方法是在toggle数组中的每个event对象上添加另一个属性（比如events）。您可以动态添加它。并基于此隐藏/显示。

HTML

<div *ngFor="let event of events; index as i" class="event-list">
    <section class="event-item" (click)="event.toggle=!event.toggle">
        <div class="event-summary">
            <h1 class="event-name">{{ event.name }} </h1>
        </div>
    </section>

    <!-- WANT TO SHOW THIS WHEN ABOVE SECTION ELEMENT IS CLICKED -->
    <section class="event-details" *ngIf="event.toggle">
        <p>Details</p>
        <p>Details</p>
        <p>And deets</p>
    </section>
    <!-- END SECTION -->

</div>

看到这个demo

Answer 2

您可以在let中创建一些变量（使用*ngFor关键字）并在每个*ngFor模板中使用它。

*ngFor="let item of list; let hide = false"

使用这种新状态，您的组件不会产生副作用，并且您的活动保持不变。

<div *ngFor="let item of list; let hide = false">
  <button (click)="hide = !hide">{{hide ? 'Show' : 'Hide'}}</button>
  <p *ngIf="!hide">{{item.id}}</p>
  <p *ngIf="!hide">{{item.name}}</p>
</div>

示例：https://stackblitz.com/edit/angular-ngfor-toggle