Ionic2 ion-toggle 在 ionChange 上获得价值

Question

我这里有这个开关：

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

当我单击它时，我想调用方法 notify 通过参数传递切换值。如何获取切换值？

谢谢！

Answer 1

有两种检查方式。

第一个就像@Chathuranga Silva 建议的那样

html

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

ts

notify(event: any) { console.log("toggled: "+event.target.checked); }

第二个是这样的：

html

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

ts

var isToggled: boolean = true;

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

你选择哪一个由你决定，我推荐第二个，因为它更容易操作 constructor/onInit 中的切换，并且更容易在 notify() 之外使用此值方法。

Answer 2

就像您在 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在他的评论中提到的：

Be very careful with ionChange when it's bound directly to ngModel. The notify method will get called when the value bound to ngModel changes, either from the view via someone clicking the toggle or in your component via code e.g. when you do a fresh GET call. I had an issue recently whereby clicking the toggle triggered a PATCH, this meant that every other client would automatically trigger a PATCH when the data bound to the toggle changed.

We used: <ion-toggle [ngModel]="isToggled" (ngModelChange)="notifyAndUpdateIsToggled()"></ion-toggle> to get around this

Answer 3

您可以在 ionChange.

中使用 $event

查看：

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

控制器：

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

Answer 4

使用这个

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

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