angular – 单击“添加类”上的“切换”类并删除

发布时间：2020-12-17 17:03:32 所属栏目：安全来源：网络整理

导读：如果我单击项目我需要添加类名称,如果单击相同的项目需要删除ngFor循环的类 ion-item *ngFor="let x of statementresponse;let i=index" class="cust_delay delay" [ngClass]="{'active': selectedItem == x}" (click)="listClick($event,x)" /ion-itemselec

如果我单击项目我需要添加类名称,如果单击相同的项目需要删除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;.
}

解决方法

其中一种方法是让您的商品具有“有效”属性,如下所示：

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

在模板内部代表他们像这样：

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

最后,toggleClass()方法只是切换被点击项的活动状态：

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

Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!