单击离子标签以切换离子开关

Question

我正在创建一个带有ionic 5的页面。

我正在使用<ion-toggle>制作"记住我"按钮。

<ion-item>
<ion-label>remember me</ion-label>
<ion-toggle class="button"></ion-toggle>
</ion-item>

Ion-toggle工作正常，但我无法通过单击旁边的标签来切换它。

我已经尝试了许多解决方案。

API 文档的链接是：https://ionicframework.com/docs/api/toggle

有没有办法使离子切换和文本都可以点击？

我正在使用离子角

提前致谢

Answer 1

这是你可以做的：

• 将离子ID添加到切换开关中，例如#mytoggle
• 使用标签(click)中的 ID 切换.checked属性

法典：

<ion-item>
<ion-label (click)="mytoggle.checked = !mytoggle.checked">remember me</ion-label>
<ion-toggle #mytoggle class="button"></ion-toggle>
</ion-item>

在堆叠闪电战中尝试一下

Answer 2

在 ts 文件中： 宣：

@ViewChild('mytoggle', {static: true}) mytoggle: IonToggle;
changeToggle() {
const toggle = this.mytoggle.checked;
toggle = !toggle;
}

在 html 中：

<ion-item>
<ion-label (click)="changeToggle()">remember me</ion-label>
<ion-toggle class="button">
</ion-toggle>
</ion-item>

Answer 3

嗨，所有的解决方案将是：

<ion-toggle color="danger" [(ngModel)]="myvar" [checked]="myvar" (ionChange)=myMethod()></ion-toggle>

在组件内部：

myMethod() {
console.log(">>>>: " + this.myvar);
if (this.myvar) {
//do something
} else {
//do something
} 
}

希望这能解决所有问题。

Answer 4

上面的解决方案仅适用于一个开关。如果您有动态"发件人"，则需要以下内容：

TS 文件：

changeToggle(fieldname) {
const fieldValue = JSON.parse(this.form.get(fieldname).value);
this.form.controls[fieldname].setValue(!fieldValue);
}

文件：

<ion-label (click)="changeToggle(item.name)">{{item.label}}:</ion-label>
<ion-toggle formControlName="{{item.name}}"
(ionChange)="settingsChange($event)">
</ion-toggle>