离子：如果满足特定条件，则在事件处理程序中选中复选框答案

【问题标题】：Ionic: Make checkbox checked in event handler if specific criteria are met离子：如果满足特定条件，则在事件处理程序中选中复选框
【发布时间】：2019-01-09 13:24:46
【问题描述】：

我有一个带有复选框的表单，对于某些复选框，以下适用：

当一个复选框被选中并被点击并且某些语句为真时，该复选框不应该被取消选中，而是跳回到选中状态。

这是当前的html：

<ion-item>
    <ion-label stacked  [innerHTML]="htmlString"></ion-label>
    <ion-checkbox (click)="checkboxClick($event)"></ion-checkbox>
  </ion-item>

这是当前的 .ts：

checkboxClick(e){
    var statement = true;

    if(statement){
    e.target.checked = true;
    }
  }

这是一个展示该问题的堆栈闪电战：https://stackblitz.com/edit/ionic-tcxd55?file=pages%2Fhome%2Fhome.ts

【问题讨论】：

这不是正确的堆栈闪电战

标签： angular ionic-framework ionic2 ionic3 dom-events

【解决方案1】：

使用 (ionChange) 而不是 (click)

html

<ion-checkbox (ionChange)="checkboxClick($event)" checked></ion-checkbox>

  checkboxClick(e){
    var statement = true;
    if(statement){
      e.checked = true;
    }
  }

【讨论】：

非常感谢你救了我的命
对于任何寻找离子 5 答案的人 --> 它已更新为“e.detail.checked”

【解决方案2】：

我不明白 stackblitz 与您的问题有何关系，但在这里我看到您拼错了“目标”：

  if(statement){
    e.target.checked = true;
    }

【讨论】：

抱歉，已将 stackblitz 更新到右侧。是的，我确实拼错了，但改变它并不能解决问题。

【解决方案3】：

以下对我有用

HTML：

<ion-item>
     <ion-label>Enable Face Plotting (More Processor intensive)</ion-label>
     <ion-checkbox color="danger" checked="{{facePlottingOption}}" (ionChange)="checkboxFacePlotting($event)">
     </ion-checkbox>
 </ion-item>

.TS 文件：

export class TabCapturePage {
facePlottingOption: boolean = false;

public checkboxFacePlotting(e) {
    if (e.currentTarget.checked) {
      console.log("=========FACE PLOTTING ENABLED");
      this.facePlottingOption = true;
    } else {
      console.log("=========FACE PLOTTING DISABLED");
      this.facePlottingOption = false;
    }
  }
}

【讨论】：