单击添加类切换类并删除

时间:2017-09-23 12:03:28

标签: angular typescript ionic-framework

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

3 个答案:

答案 0 :(得分:8)

其中一种方法是让您的商品具有&#34;有效&#34; 属性,如下所示:

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

答案 1 :(得分:1)

尝试以下方法:

<强> HTML

this is a sentence 221j: 
this another sentence: 
again a sentence 
the last sentence

<强>打字稿:

<ion-item *ngFor="let x of statementresponse;let i=index" 
     class="cust_delay delay"[class.active]="selectedItem == i" 
     (click)="selectedItem=i" >
      {{x}}
</ion-item>

StackBlitz

答案 2 :(得分:0)

您可以在某处存储该值的布尔值。喜欢在对象本身然后使用

<ion-item [class.myClass]="item.myClass"></ion-item> item.myClass是布尔值

并点击翻转该值

item["myClass"] = !item["myClass"]