html - 单击使用 Angular 5 时如何使列表组处于事件状态？

Question

我正在使用 Bootstrap 列表组和 Angular 5 我想知道如何在特定点击列表组时启用或设置为事件状态。现在我的问题是，当我单击其中一个时，它会启用全部或将它们全部设置为事件状态。我只想启用列表组中的特定列表。

-- Bootstrap 4
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

-- my list
<ul class="list-group">
  <li class="list-group-item" [class.active]="!isActive" (click)="onClick(s)" *ngFor="let s of $speech | async" [value]="s.$key">
    {{s.speech}}
    <i class="fa fa-chevron-right"></i>
  </li>
</ul>

-- from the components

 isActive = false;

  onClick(s) {

    console.log(s)

    this.isActive = !this.isActive;
  }

Answer 1

一个简单的解决方案是通过索引跟踪事件元素。

试试这个 HTML:

<ul class="list-group">
  <li class="list-group-item" [class.active]="active === i" (click)="onClick(i)" *ngFor="let s of ($speech | async); let i = index;" [value]="s.$key">
    {{s.speech}}
    <i class="fa fa-chevron-right"></i>
  </li>
</ul>

和你的组件:

active: number;
onClick(index: number) {
  this.active = index;
}