Question

我在这里切换：

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

当我点击这个时，我想调用方法notify通过参数传递切换值。我如何获得切换值？

谢谢！

Answer 1

就像您在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 2

您可以在 $event 中使用 ionChange 。

查看：

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

控制器：

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

Answer 3

有两种检查方式。

第一个就像@Chathuranga席尔瓦建议

<强> HTML

-fx-background-image:url("Image.png"); -fx-background-repeat:repeat;

<强> TS

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

第二个是这样的：

<强> HTML

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

<强> TS

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

您选择哪一个取决于您，我推荐第二个，因为在构造函数/ onInit中操作切换更容易，并且更容易在var isToggled: boolean = true; notify() { console.log("toggled: "+ this.isToggled); }方法之外使用此值。

Answer 4

使用此

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

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

Ionic2 ion-toggle在ionChange上获得价值

4 个答案: