Javascript 离子框架-无法防止离子切换切换

我正在我的应用程序中使用离子切换。当用户点击（检查）ion开关时，我已经在ion toogle上写了ionChange钩子。在这个钩子中，由于应用程序逻辑的原因，我会提示用户ion toggle无法设置

使用event.preventDefault防止离子切换 组件html

使用viewchild 使用nativeElement 此代码也不起作用。有谁能帮我找到正确的方法来阻止ion切换组件在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;
    }

导出类礼品工厂{
giftsAllMatrix:GiftCatalogueEntry[][]；
礼品：阵列；
总点数：数字=0；
错误：字符串；
giftSelectedFlg:boolean=false；
礼物选择：任何；
//giftSelect:any；//模板变量。
@ViewChild（'giftSelect'）gtSel；
onGiftSelect（giftSelCode:string，
所需点数：数字，
礼物：绳子，
所选：布尔值
，礼物选择：任何，
事件：事件）
{
...
//尝试取消选中离子切换-不起作用
this.gtSel.nativeElement.checked=false；
}

离子切换标签 离子切换标签

---

我不确定你的应用程序应该如何工作，但只是一个想法…与其等待用户切换它来进行验证，不如在加载页面时在所有切换中进行验证，并将无法切换的切换显示为禁用状态？另一个解决方案是将切换绑定到

[（ngModel）]

并在验证运行且不应激活切换时将其设置回false。@Sebaferras我尝试了[（ngModel）]。但这里的问题是，我在同一页上有4个离子切换组件，一旦我使用[（ngModel）]绑定，所有离子切换元素都会绑定到单个模型变量。我不知道如何使用[（模型）]使用array/MapI，我不确定你的应用程序应该如何工作，但这只是一个想法……与其等待用户切换以进行验证，不如在加载页面时在所有切换中进行验证，并将无法切换的切换显示为禁用状态？另一个解决方案是使用

[（ngModel）]

并在验证运行且不应激活切换时将其设置回false。@sebaferreras我用[（ngModel）]尝试过。但这里的问题是，我在同一页上有4个离子切换组件，并且一旦我使用[（ngModel）]绑定后，所有离子切换元素都被限制到单个模型变量。我不知道如何将[（ngModel）]与数组/映射一起使用

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

    }

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

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

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

   }