onchange équivalent en angular2

J'utilise onchange pour enregistrer la valeur de ma plage d'entrée dans Firebase, mais j'ai une erreur qui dit que ma fonction n'est pas définie.

c'est ma fonction

saverange(){
  this.Platform.ready().then(() => {
    this.rootRef.child("users").child(this.UserID).child('range').set(this.range)
  })
} 

c'est mon html

<ion-item>
  <ion-row>
    <ion-col>Rayon <span favorite><strong> {{range}} km</strong></span></ion-col>
    <ion-col><input type="range" name="points" min="0" max="40" [(ngModel)]="range" onchange="saverange()"></ion-col>
  </ion-row>
</ion-item>

quel est l'équivalent d'un changement d'angle, s'il en existe. Merci

Nous pouvons utiliser des liaisons d'événements angulaires pour répondre à n'importe quel événement DOM . La syntaxe est simple. Nous entourons le nom de l'événement DOM entre parenthèses et lui attribuons une instruction de modèle entre guillemets. - référence

Puisqu'il changefait partie de la liste des événements DOM standard , nous pouvons l'utiliser:

(change)="saverange()"

Dans votre cas particulier, puisque vous utilisez NgModel, vous pouvez interrompre la liaison bidirectionnelle comme ceci à la place:

[ngModel]="range" (ngModelChange)="saverange($event)"

ensuite

saverange(newValue) {
  this.range = newValue;
  this.Platform.ready().then(() => {
     this.rootRef.child("users").child(this.UserID).child('range').set(this.range)
  })
} 

Cependant, cette approche saverange()est appelée à chaque frappe, vous feriez donc probablement mieux d'utiliser (change).

Dans Angular, vous pouvez définir event listenerscomme dans l'exemple ci-dessous:

<!-- Here you can call public methods from parental component -->
<input (change)="method_name()"> 

@Mark Rajcok a donné une excellente solution pour les projets ioniques qui incluent une entrée de type plage.

Dans tout autre cas de projets non ioniques, je suggérerai ceci:

HTML:

<input type="text" name="points" #points maxlength="8" [(ngModel)]="range" (ngModelChange)="range=saverange($event, points)">

Composant:

    onChangeAchievement(eventStr: string, eRef): string {

      //Do something (some manipulations) on input and than return it to be saved:

       //In case you need to force of modifing the Element-Reference value on-focus of input:
       var eventStrToReplace = eventStr.replace(/[^0-9,eE\.\+]+/g, "");
       if (eventStr != eventStrToReplace) {
           eRef.value = eventStrToReplace;
       }

      return this.getNumberOnChange(eventStr);

    }

L'idée ici:

1. Laisser la (ngModelChange)méthode faire le travail de Setter:

   (ngModelChange)="range=saverange($event, points)

2. Activation de l'accès direct à l'élément Dom natif à l'aide de cet appel:

   eRef.value = eventStrToReplace;