如何在点击时突出显示Angular 2中当前按下的按钮元素？

Question

我有这行代码:

<button *ngFor="let group of groupsList" attr.data-index="{{ group.index }}" (click)="processGroups(group.index)">{{ group.title }}</button>

是否可以将类添加clicked到当前单击的按钮？如果点击其他按钮,删除？

Answer 1

您可以使用ngFor小号index有[class.xxx]这样的:

<button [class.clicked]="clickedButton == i" 
   *ngFor="let group of groupsList let i=index" 
   attr.data-index="{{ group.index }}" 
   (click)="clickedButton = i; processGroups(group.index)">
     {{ group.title }}</button>