javascript - 如何在 Angular2 的 ngFor span 中添加/删除类？

Question

当我单击ngFor跨度时，我设法在ngFor跨度上添加class，但是如果我单击另一个跨度，我会尝试删除当前类。

假设我有这些来自 ngFor 的 Span，当我单击 S 时，它将添加一个类 active-span，如果我单击 M，它将添加一个类 >active-span 但从 S 中删除该类。

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

使用渲染器的点击功能

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}"

你的 Controller 可能是这样的(或者使用你合适的对象，如果你已经有一个来存储它):

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