离子 2/3 :如何以编程方式取消选中复选框

Question

我遇到一种情况，我必须取消选中复选框，单击按钮。

这是我的复选框代码

<ion-checkbox [checked]="!isChecked" [disabled]="!isdisabled" (ionChange)="saveProfile($event)" [(ngModel)]="default"></ion-checkbox>

我试过使用！iChecked，但它不起作用。基本上，如果用户已经选中了该复选框，我希望在单击按钮时将其取消选中(基于某些条件(。

<button class="button-m" (click)="navigateTo()" ion-button color="secondary"><ion-icon name="next">&nbsp;&nbsp;</ion-icon> Next </button>

TS 文件

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
@Component({
  selector: 'choose-profile',
  templateUrl: 'choose-profile.html',
})
export class ChooseProfilePage {
  profileValue : string;
  isdisabled : boolean;
  isChecked :boolean;
  constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController) {
  } 
  getSelectedProfile(val){
    this.profileValue = val;
    if(this.profileValue!=undefined){
       this.isdisabled = true;
    }
    else{
      this.isdisabled = false;
    }
  }
  saveProfile(val){
    if(val.checked==true)
    {
     this.presentToast( this.profileValue+"set as default profile")
    }
    else
    {
      this.presentToast("No default profile")
    }
  }
  presentToast(val){
    let toast = this.toastCtrl.create({
      message: val,
      duration: 3000,
      position: 'top'
    });
    toast.present();
  }
  navigateTo()
  {
    console.log("Next Clicked")
    this.isChecked == true;
  }

}

Answer 1

您的代码中有错误。 this.isChecked == true; 不会将isChecked变量设置为 true。它只是进行比较以检查isChecked是否属实。您应该使用 = 而不是 == 。

将代码更改为如下所示：

  navigateTo()
  {
    console.log("Next Clicked")
    this.isChecked = true;
  }

Answer 2

不要将 checked 属性用作绑定。您的输入与ngModel绑定，因此您需要做的是更改该字段的值。

修复双等于后，我很惊讶您的代码有效，因为模板正在寻找default并根据其值设置检查属性。创建一个变量并绑定到它，然后更改它。我重写了你的组件

然后在您的组件中：

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
@Component({
  selector: 'choose-profile',
  templateUrl: 'choose-profile.html',
})
export class ChooseProfilePage {
  public shouldSaveProfile = false;
  profileValue : string;
  isdisabled : boolean;
  constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController) { } 
  getSelectedProfile(val){
    this.profileValue = val;
    this.isdisabled = this.profileValue ? true : false;
  }
  saveProfile(val){
    if(this.shouldSaveProfile)
       this.presentToast( this.profileValue+"set as default profile")
    else this.presentToast("No default profile")
  }
  presentToast(val){
    let toast = this.toastCtrl.create({
      message: val,
      duration: 3000,
      position: 'top'
    });
    toast.present();
  }
  navigateTo()
  {
    this.shouldSaveProfile = true;
    console.log("Next Clicked, should save value:", this.shouldSaveProfile);
  }
}