如何在Angular2的ngFor span中添加/刪除類？

Question

單擊時設法在ngFor跨度上添加class ，但是如果單擊另一個跨度，則試圖刪除當前類。

假設我有這些跨度來自ngFor ，當我單擊S時，它將添加一個active-span類；如果單擊M，它將添加一個active-span類，但從S中刪除該類。

<span class="jersey-size" [ngClass]="{'active-span': size.active}" (click)="getSizeData(size)">{{  size.size }}</span>

使用Renderer單擊功能

select(event:any){
  event.preventDefault()
  this.render.setElementClass(event.target, "active-span", true || false);
}

或使用ngClass但這僅可切換類。

select(size){
 size.active = !size.active;
}
<span class="jersey-size" [ngClass]="{'active-span': size.active}" (click)="getSizeData(size)">{{  size.size }}</span>

我的問題是，當我選擇/單擊一個新跨度時，如何從上一個跨度中刪除該類？

Answer 1

我認為您應該存儲大小選擇（或索引）（並且您將需要將其存儲在數據庫中嗎？）然后像這樣使用它：

[ngClass]="{'active-span': size.size === selectedSize}"

您的控制器可能類似於（或者如果您已經有一個對象來存儲它，則使用適當的對象）：

selectedSize: string;
select(size){
 this.selectedSize = size.size;
}