IONIC 5：复选框 ngModel 双向绑定不起作用

Question

我正在尝试使用复选框进行简单的双向绑定，但由于某种原因，它无法正常工作。已尝试搜索问题，但我的代码与其他人建议的相同，但它对我不起作用，我似乎看不出有什么问题。

我在 .ts 中的代码

@Component({
  selector: 'app-investigation',
  templateUrl: './investigation.component.html',
  styleUrls: ['./investigation.component.scss'],
})
export class InvestigationComponent implements OnInit {

  iopa:boolean = true;
  constructor() { }

  ngOnInit() {}

  onIOPAChange() {
    console.log(this.iopa);
  }

}

Html 模板

 <ion-list>
  <ion-item >
    <ion-label>IOPA</ion-label>
    <ion-checkbox slot="start" [(ngModel)]="iopa" ngDefaultControl> 
    </ion-checkbox>
  </ion-item>
</ion-list>

当我选中或取消选中该复选框时，即使我已将其设置为 true，我也没有看到“iopa”中的值发生变化，加载时未选中该复选框。

谢谢

Answer 1

在html中：

<ion-checkbox slot="start" [(ngModel)]="iopa" (ionChange)="onIOPAChange($event)"></ion-checkbox>

并在 ts class:

onIOPAChange(ev: CustomEvent) {
    // CustomEvent can be changed to any but for better code complete we use it
    // this.ioap should give undefined here since change event fires before ngModel saves the value into the variable so in order to keep up to date with checkbox if checked or not , u can use this value of ev.target.value  and do your work...
    console.log(ev.target.value);
}

如果您只需要一次性使用复选框值（插入而不编辑...），那么您可以删除选中的属性，因为它的主要目的是使复选框在“[=18=”的情况下被选中]”是真的...

IONIC 5：复选框 ngModel 双向绑定不起作用

IONIC 5 : Checkbox ngModel two way binding doesn't work

angular

ionic-framework

ionic5

ngmodel