Angular 2将css类添加到所选项目

Question

如何在Angular 2中将活动类添加到单击的所选项目，并再次单击删除该类。但对于列表中的多个项目。

<li *ngFor="let item of items" (click)="itemSelected(item)">
  <p>{{ item }}</p>
</li>

例如，我有5个项目的列表。单击第一项添加类激活，然后单击第五项添加也激活类。

Answer 1

您可以使用：

[NgStyle] https://angular.io/api/common/NgStyle

[NgClass] https://angular.io/api/common/NgClass

例如：

<li *ngFor="let item of items" (click)="itemSelected(item)">
  <p [NgClass]="listSelectedItems.indexOf(item)>-1"?"your-active-class":"your-inactive-class" >{{ item }}</p>
</li>

使用 itemSelected（）添加或删除 listSelectedItems

中的项目

Answer 2

您可以使用here的语法：

<li *ngFor="let item of items" (click)="selectItem(item)" [class.selected]="isSelected(item)">
    <p>{{ item }}</p>
</li>

这似乎比使用ng-class更加惯用。