Question

我正在使用离子5创建页面。

我正在使用离子拨动按钮来记住我。

 <IonItem>
            <Ion-Label>remember me</Ion-Label>
            <Ion-toggle class="button">
   </Ion-toggle>
          </IonItem>

离子切换功能正常，但是我无法通过单击其旁边的标签来切换它。

我尝试了许多解决方案。

链接为：https://ionicframework.com/docs/api/toggle

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

我正在使用离子角钢

预先感谢

Answer 1

这是您可以执行的操作：

使用例如#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>

Try it in stackblitz

Answer 2

在ts文件中：声明：

if user_form.is_valid() and profile_form.is_valid():

在html中：

@ViewChild('mytoggle', {static: true}) mytoggle: IonToggle;

changeToggle() {
    const toggle = this.mytoggle.checked;
    toggle = !toggle;
}

Answer 3

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

TS 文件：

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

HTML 文件：

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

单击离子切换按钮并标记

3 个答案: