单击使用Angular 5时如何激活列表组？

Question

我正在研究Bootstrap list-group和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;
}