web-dev-qa-db-fra.com

Basculer classe sur clic ajouter classe et supprimer

si je clique sur l'élément, j'ai besoin d'ajouter le nom de la classe et si le même élément doit être supprimé, il faut supprimer la classe pour ngFor loop

<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;.
}
angulartypescriptionic-framework
3
sridharan

Pour ce faire, vous pouvez notamment utiliser les propriétés "actives" de vos éléments, comme suit:

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

Et à l'intérieur du modèle, représentez-les comme ceci:

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

Et enfin, la méthode toggleClass () bascule simplement l'état actif de l'élément cliqué:

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

Exemple

7
Mihailo

Essayez ce qui suit:

HTML

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

TypeScript: 

selectItem=-1

StackBlitz 

0
Vega

Vous pouvez stocker un booléen pour cette valeur quelque part. comme dans l'objet lui-même et ensuite utiliser 

<ion-item [class.myClass]="item.myClass"></ion-item>item.myClass étant le booléen

et cliquez sur retourner cette valeur

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

0
LLL