web-dev-qa-db-fra.com

Ionic2 ion-toggle obtient une valeur sur ionChange

J'ai cette bascule ici:

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

Lorsque je clique dessus, je veux appeler la méthode notifier en passant la valeur de basculement par paramètre. Comment puis-je obtenir la valeur de basculement?

Merci!

angulartypescriptionic-frameworkionic2ionic3
11
bbcbreno

Tout comme vous pouvez le voir dans Ionic2 Docs - Toggle , une meilleure façon de le faire serait de lier la bascule à une propriété à partir de votre composant en utilisant ngModel .

Code composant:

public isToggled: boolean;

// ...

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

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

Vue:

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

De cette façon, vous n'avez pas besoin d'envoyer la valeur car c'est déjà une propriété de votre composant et vous pouvez toujours obtenir la valeur en utilisant this.isToggled.

[~ # ~] mise à jour [~ # ~]

Tout comme @ GFoley8 mentionné dans son commentaire:

Soyez très prudent avec ionChange lorsqu'il est lié directement à ngModel. La méthode notify sera appelée lorsque la valeur liée à ngModel change, soit depuis la vue via quelqu'un en cliquant sur la bascule, soit dans votre composant via le code, par exemple lorsque vous effectuez un nouvel appel GET. J'ai récemment rencontré un problème en cliquant sur la bascule déclenchant un PATCH, cela signifiait que tous les autres clients déclencheraient automatiquement un PATCH lorsque les données liées à la bascule changeaient.

Nous avons utilisé: <ion-toggle [ngModel]="isToggled" (ngModelChange)="notifyAndUpdateIsToggled()"></ion-toggle> pour contourner ce problème

32
sebaferreras

Vous pouvez utiliser $event in ionChange.

Vue:

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

Manette:

notify(event) {
   console.log(event.checked);   
}
14
Jaydeep Kataria

Il y a 2 façons de vérifier.

Le premier est comme suggéré par @Chathuranga Silva

html

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

ts

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

Le deuxième serait quelque chose comme ceci:

html

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

ts

var isToggled: boolean = true;

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

Celui que vous choisissez dépend de vous, je recommanderais le second car il sera plus facile de manipuler le basculement dans le constructeur/onInit, et plus facile d'utiliser cette valeur en dehors de la méthode notify().

2
Ivar Reukers