angular - 单击添加类和删除切换类

Question

如果我点击项目我需要添加类名，如果点击相同的项目需要删除类以进行 ngFor 循环

<ion-item *ngFor="let x of statementresponse;let i=index" class="cust_delay delay" [ngClass]="{'active': selectedItem == x}" (click)="listClick($event, x)" >
</ion-item>

selectedItem:any;
listClick(event, newValue) {
    console.log(newValue);
    this.selectedItem = !newValue;.
}

Answer 1

您可以执行此操作的一种方法是让您的项目具有“事件” 属性，如下所示:

items = [
  {name:'one', active:false},
  {name:'two', active:false},
  {name:'three', active:false},
];

在模板中这样表示它们:

<li *ngFor="let item of items" 
    (click)="toggleClass(item)" 
    [ngClass]="{'active': item.active}">{{ item.name }}</li>

最后 toggleClass() 方法只是切换被点击项目的事件状态:

toggleClass(item){
  item.active = !item.active;
}

---

Example