angular - 在 Ionic 中验证 ion-checkbox 是否被选中

我有一个复选框列表，我需要在至少有一个项目被选中时启用一个按钮。

到目前为止，我已经设法做到这一点，但它在 event.target.checked 上不起作用，什么都没发生，我也刚刚尝试了 event.checked，还是没用。

<ion-list>
   <ion-item *ngFor="let option of question.options">
      <ion-label>{{option}}</ion-label>
      <ion-checkbox color="secondary" value="option" (click)="isChecked($event)" name="option"></ion-checkbox>
   </ion-item>
</ion-list>

file.ts：

isChecked(event) {
  if ( event.target.checked ) {
    console.log("Checked!");
    this.btnDisabled = false;
 }
}

Ionic 版本：3.9.5

Angular 5

答案＃1

像这样试试：

演示示范

模板：

<ion-list>
   <ion-item *ngFor="let option of question.options">
      <ion-label>{{option}}</ion-label>
      <ion-checkbox color="secondary" value="option" (click)="onChange(option)" name="option"></ion-checkbox>
   </ion-item>
</ion-list>

<button [disabled]="checkedItems.length <1 ">Save </button>

TS :

 checkedItems = []


 onChange(item) {
    if(this.checkedItems.includes(item)) {
      this.checkedItems = this.checkedItems.filter((value)=>value!=item);

    } else {
      this.checkedItems.push(item)
    }
  }

答案＃2

使用 ionChange 代替 click，使用 event.checked 代替 event.target.checked。

<ion-checkbox color="secondary" value="option" (ionChange)="isChecked($event)" name="option"></ion-checkbox>

isChecked(event) {
  if ( event.checked ) {
    this.btnDisabled = false;
 }
}