Comment ajouter une classe pour plusieurs boutons à bascule quand il est désactivé

Question

J'ai plusieurs boutons bascule. Sur désactiver de cela, je veux ajouter classe à mon parent div ou couleur rouge par exemple à partir de maintenant.

Voici démo ce que j'ai essayé: https://stackblitz.com/edit/ionic-j9amio?file=pages%2Fhome%2Fhome.ts

Mon html

<ion-content> 
    <div *ngIf="searchResults?.details?.length > 0"> 
    <ion-item *ngFor="let searchResult of searchResults?.details">  
     <h2>{{searchResult?.user_id}}</h2> 
     <h3>{{searchResult?.email}}</h3> 
     <p>{{searchResult?.token}}</p> 
    <ion-label>on disable add red color {{searchResult?.user_id}}</ion-label> 
    <ion-toggle checked="true" (ionChange)="jobIsDisabled($event,searchResult.user_id)"> 
    </ion-toggle>          
    </ion-item>    
</div> 
</ion-content> 

Mon contrôleur

searchResults = { 
    "details": [{ 
     "user_id": "73", 
     "email": "ejazanwar777@gmail.com", 
     "token": "217808036f0215fee13aee8925574899" 
    }, { 
     "user_id": "74", 
     "email": "hemanthraj2009@gmail.com", 
     "token": "fe4fd5fa58075a69dd7e323cd0f1f2ad" 
    }, { 
     "user_id": "75", 
     "email": "ggsgowtham17@gmail.com", 
     "token": "9ed2839e54980a34e968e61d2bae362f" 
    }, { 
     "user_id": "76", 
     "email": "contact@saddamhussain.com", 
     "token": "e798b517a4171e1108e6809228c63c9c" 
    }] 
}; 


    jobIsDisabled(event,user_id){ 
    alert(user_id); 
    console.log(event); 
    } 

Answer 1

// est le code ici. il peut vous aider

Mon html

<ion-content> 
    <div *ngIf="searchResults?.details?.length > 0" > 
    <ion-item *ngFor="let searchResult of searchResults?.details; let i = index;" >  
     <h2>{{searchResult?.user_id}}</h2> 
     <h3>{{searchResult?.email}}</h3> 
     <p>{{searchResult?.token}}</p> 
    <ion-label class="{{searchResult.class}}">on disable add red color {{searchResult?.user_id}}</ion-label> 
    <ion-toggle checked="true" (ionChange)="jobIsDisabled($event,searchResult.user_id, i)"> 
    </ion-toggle>          
    </ion-item>    
</div> 
</ion-content> 

Mon contrôleur

jobIsDisabled(event,user_id,index){ 
     if(event.value == false) 
      this.searchResults.details[index]['class']= 'red'; //here red is the css class 
     else 
      this.searchResults.details[index]['class']= ''; 
     }