Ionic2 ion-toggle 获取 ionChange 的值

Posted 2023-03-13

【中文标题】Ionic2 ion-toggle 获取 ionChange 的值

【英文标题】：Ionic2 ion-toggle get value on ionChange

【发布时间】：2017-04-05 09:20:16

【问题描述】：

我这里有这个开关：

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

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

谢谢！

【问题讨论】：

尝试通知($event)

然后在你的函数中notify(event:any) console.log(event.target.value);

【参考方案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() 方法之外使用这个值。

【参考方案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> 来解决这个问题

【讨论】：

感谢@sebaferreras，这有帮助！

谢谢，您也可以从 [(ngModel)] 中删除圆括号

当ionChange 直接绑定到ngModel 时要非常小心。当绑定到ngModel 的值发生变化时，notify 方法将被调用，无论是从视图中通过某人单击切换开关还是在您的组件中通过代码，例如当您拨打新的GET 电话时。我最近遇到了一个问题，即单击切换触发了PATCH，这意味着当绑定到切换的数据发生更改时，每个其他客户端都会自动触发PATCH。我们使用<ion-toggle [ngModel]="isToggled" (ngModelChange)="notifyAndUpdateIsToggled()"></ion-toggle> 来解决这个问题。

感谢@GFoley83 我已将您的评论添加到答案中:)

我已经使用（单击）从 .ts 文件中的 ion-toggle 获取 ngModel 值，但它有时会随机启动错误。但是，改成（ngModelChange）后，问题就解决了。谢谢

【参考方案3】：

您可以在 ionChange 中使用 $event。

查看：

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

控制器：

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

【讨论】：

Ionic 5 中的 undefined

这在最新版本中无效。结合使用 ngModel 和 onChange。或使用 event.currentTarget.checked。

Ionic 5 的解决方案：stefvanlooveren.me/blog/…

【参考方案4】：

使用这个

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

setAvailability(e) 
  this.setOffOrnot = ...