Ionic2离子切换获取ionChange上的值

slmsl1lt  于 2022-12-08  发布在  Ionic
关注(0)|答案(5)|浏览(132)

这里有一个开关:

<ion-toggle (ionChange)="notify(value)"></ion-toggle>

当我点击这里的时候,我想调用notify方法,通过参数传递切换值。我怎样才能得到切换值呢?
谢谢你,谢谢你

txu3uszq

txu3uszq1#

就像您在Ionic2 Docs - Toggle中看到的那样,更好的方法是通过使用ngModel将切换绑定到组件的属性
组件代码:

public isToggled: boolean;

// ...

constructor(...) {
  this.isToggled = false;
}

public notify() {
  console.log("Toggled: "+ this.isToggled); 
}

查看方式:

<ion-toggle [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>

通过这种方式,您不需要发送值,因为它已经是组件的属性,您始终可以通过使用this.isToggled来获取值。

    • 更新**

就像**@GFoley83**在评论中提到的:
当ionChange直接绑定到ngModel时,要非常小心。当绑定到ngModel的值发生变化时,notify方法将被调用,无论是通过单击切换从视图中调用,还是通过代码在组件中调用,例如,当您执行一个新的GET调用时。我最近遇到了一个问题,单击切换触发了PATCH,这意味着当绑定到触发器的数据改变时,每一个其他客户机将自动触发PATCH
我们使用:<ion-toggle [ngModel]="isToggled" (ngModelChange)="notifyAndUpdateIsToggled()"></ion-toggle>来解决此问题

mcvgt66p

mcvgt66p2#

您可以在**ionChange中使用$event**。
查看方式:

<ion-toggle (ionChange)="notify($event)"></ion-toggle>

控制器:

notify(event) {
   console.log(event.checked);   
}
nhn9ugyo

nhn9ugyo3#

There are 2 ways of checking.
First one is like @Chathuranga Silva suggested

html

<ion-toggle (ionChange)="notify($event)"></ion-toggle>

ts

notify(event: any) { console.log("toggled: "+event.target.checked); }
Second one would be something like this:

html

<ion-toggle (ionChange)="notify()" [checked]="isToggled"></ion-toggle>

ts

var isToggled: boolean = true;

notify() {
  console.log("toggled: "+ this.isToggled); 
}

Which one you pick is up to you, I'd recommend the second one since it will be easier to manipulate the toggle in the constructor/onInit, and easier using this value outside the notify() method.

yvgpqqbh

yvgpqqbh4#

您可以在ionChange中使用$event。
查看方式:

<ion-toggle (ionChange)="onChange($event)"></ion-toggle>

控制器:

onChange(ev) {
   console.log(ev.target.checked);   
}
ulydmbyx

ulydmbyx5#

使用此

<ion-toggle id="availabilityButton" [(ngModel)]="setOffOrnot"
(ionChange)="setAvailability()"></ion-toggle>

setAvailability(e) {
  this.setOffOrnot = ...
}

相关问题