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并根据它的值设置checked属性。创建一个变量并绑定到它，然后更改它。我重写了你的组件

然后在你的组件中：

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

Ionic 2/3：如何以编程方式取消选中复选框

2 个答案: