Ionic2 ion-toggle 获取 ionChange 的值

Question

我这里有这个开关：

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

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

谢谢！

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); 
}

你选择哪一个取决于你，我推荐第二个，因为它更容易在构造函数/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：

当 ionChange 直接绑定到 ngModel 时，要非常小心。当绑定到ngModel 的值发生变化时，notify 方法将被调用，无论是从视图中通过某人单击切换，还是在您的组件中通过代码，例如当您进行新的 GET 调用时。我最近遇到了一个问题，点击切换触发了PATCH，这意味着当绑定到切换的数据发生更改时，每个其他客户端都会自动触发PATCH。

我们使用： <ion-toggle [ngModel]="isToggled" (ngModelChange)="notifyAndUpdateIsToggled()"></ion-toggle> 来解决这个问题

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 = ...
}