web-dev-qa-db-fra.com

équivalent d'échange 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 de onchange dans angular, s'il en existe un? Merci

angular
71
PrinceZee

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

Puisque change est activé la liste des événements DOM standard , nous pouvons l’utiliser:

(change)="saverange()"

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

[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, avec cette approche, saverange() est appelé à chaque frappe, il est donc probablement préférable d'utiliser (change).

136
Mark Rajcok

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

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

@Mark Rajcok a fourni une excellente solution pour les projets d'ions comportant une entrée de type plage.

Dans tout autre cas de projets non-ion, 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 méthode (ngModelChange) effectuer le travail 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;

3
Dudi