【问题标题】：ionic framework - unable to prevent ion-toggle from toggling离子框架 - 无法阻止离子切换
【发布时间】：2017-12-05 18:15:46
【问题描述】：

我在我的应用程序中使用了 ion-toggle。当用户在 ion-toggle 上单击（检查）时，我已经在 ion-toogle 上编写了 ionChange 钩子。在这个钩子中，由于应用程序逻辑，我提示用户说不能设置离子切换。

使用 event.preventDefault 来防止 ion-toggle 切换

组件 html

<ion-content padding>
     <ion-slides pager="true">
    <ion-slide *ngFor="let giftSlide of giftsAllMatrix" >
    <ion-row *ngFor="let giftRecord of giftSlide">
      <ion-col *ngFor="let giftCol of giftRecord" col-6>
        <img src="./assets/{{giftCol.giftImage}}" >
          <p> gift code :  {{ giftCol.giftCode }} </p>
          <ion-item>
         <ion-toggle   #giftSelect (ionChange)="onGiftSelect(giftCol.giftCode, giftCol.pointsRequired ,giftCol.giftImage,giftSelect.checked,giftSelect,$event)" checked="false"></ion-toggle>
          </ion-item> 
        </ion-col>
    </ion-row>
    </ion-slide>
    </ion-slides>

组件挂钩 - onGiftSelect

onGiftSelect( giftSelCode : string , 
           pointsRequired : number ,
           giftImage : string , 
            selected : boolean 
           ,giftSelect : any,
           event : Event)
      {
         console.log("inside onGiftSelect "+giftSelCode);
         console.log("inside onGiftSelect  points required "+pointsRequired);
         console.log(" selected "+selected );
         console.log(" this.giftSelectedFlg "+this.giftSelectedFlg );
         let navigate = true;
         // if ion-toggle is true then only navigate 
         // when toggle is from 'selected' to 'deselected' do not 
         if ( selected === true)
         {
            if ( this.giftSelectedFlg  === false )
            {
                this.giftSelectedFlg = true;
            } 
            else
            {

                if(isProdSetup() === true)
                {
                    this.toast.show( "Select one gift at time ", '3000', 'center').subscribe
                    ( toast => 
                    {
                        console.log(toast);
                    });
                }
                else
                {
                     let alert = this.alertCtrl.create({
                     title: 'Gift selection',
                     subTitle: 'Multiple gift selection disallowed',
                     buttons: ['Dismiss']
                     });
                     alert.present();
                }
              navigate = false;
              event.preventDefault();
        }
         if ( navigate)
        {
           // Pass the control to giftSelect page 
           this.navCtrl.push("Giftselect",
              {
                 giftCode : giftSelCode ,
                 pointsRequired : pointsRequired ,
                 giftImage : giftImage
              });
         }

    }

使用 viewchild

使用 nativeElement

这段代码也不起作用。谁能帮我找到正确的方法来防止 ion-toggle 组件阻止在 ionChange 事件中切换。

 export class Giftfactory {
      giftsAllMatrix : GiftCatalogueEntry[][][];
      gifts : Array<any> ;
      totalPoints : number = 0;
      error : string;
      giftSelectedFlg : boolean = false;
      giftChoice : any;
      //giftSelect :  any; //template variable.
     @ViewChild ('giftSelect') gtSel ;

onGiftSelect( giftSelCode : string , 
           pointsRequired : number ,
           giftImage : string , 
            selected : boolean 
           ,giftSelect : any,
           event : Event)
    {
    ...
        // trying to uncheck ion-toggle - does not work
        this.gtSel.nativeElement.checked = false;
    }

【问题讨论】：

我不确定您的应用程序应该如何工作，但只是一个想法......而不是等待用户切换它来进行验证，是否可以在加载页面时的所有切换，并显示无法切换为禁用的切换？另一种解决方案是将切换与 [(ngModel)] 绑定，并在验证运行时将其设置回 false 并且不应激活切换。
@sebaferreras 我尝试使用 [(ngModel)]。但是这里的问题是我在同一页面上有 4 个 ion-toggle 组件，一旦我使用 [(ngModel)] 绑定，所有 ion-toggle 元素都会绑定到单个模型变量。我不知道如何将 [(ngModel)] 与数组 /Map 一起使用

标签： javascript ionic-framework ionic2

【解决方案1】：

离子切换标签

<ion-toggle  #giftSelect (ionChange)="onGiftSelect(giftCol.giftCode, giftCol.pointsRequired ,giftCol.giftImage,giftSelect.checked,giftSelect,$event)" checked="false"></ion-toggle>

切换事件处理程序

使用模板引用变量 giftSelect 访问 ion-toggle。 giftSelect 被传递给事件处理程序。使用选中的属性来设置切换关闭。

 onGiftSelect( giftSelCode : string , 
               pointsRequired : number ,
               giftImage : string , 
                selected : boolean 
               ,giftSelect : any)
   {
      //make toggle off ,depending on the application logic.
      giftSelect.checked = false;

   }

【讨论】：