禁用时如何为多个切换按钮添加类[重复]答案

【问题标题】：How to add class for multiple toggle button when it is disabled [duplicate]禁用时如何为多个切换按钮添加类[重复]
【发布时间】：2017-10-11 14:48:41
【问题描述】：

我有多个切换按钮。在禁用它时，我想将 class 添加到我的父级 div 或 red color，例如现在。

这是我尝试过的演示：https://stackblitz.com/edit/ionic-j9amio?file=pages%2Fhome%2Fhome.ts

我的 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>

我的控制器

 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);
  }

【问题讨论】：

stackoverflow.com/questions/41279830/…

标签： angular ionic3

【解决方案1】：

//这里是代码。它可以帮助你

我的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>

我的控制器

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']= '';
      }

【讨论】：