Ein Wechseläquivalent in Winkel2

Ich verwende onchange, um den Wert meines Eingabebereichs in Firebase zu speichern, aber ich habe einen Fehler, der besagt, dass meine Funktion nicht definiert ist.

Das ist meine Funktion

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

Das ist mein 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>

Was ist das Äquivalent zu einem Winkelwechsel, falls vorhanden? Danke

Wir können Angular-Ereignisbindungen verwenden, um auf jedes DOM-Ereignis zu reagieren . Die Syntax ist einfach. Wir umgeben den Namen des DOM-Ereignisses in Klammern und weisen ihm eine zitierte Vorlagenanweisung zu. - Referenz

Da changees auf der Liste der Standard-DOM-Ereignisse steht , können wir es verwenden:

(change)="saverange()"

In Ihrem speziellen Fall könnten Sie, da Sie NgModel verwenden, die bidirektionale Bindung stattdessen wie folgt auflösen:

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

Dann

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

Dieser Ansatz saverange()wird jedoch bei jedem Tastendruck aufgerufen, sodass Sie ihn wahrscheinlich besser verwenden sollten (change).

In Angular können Sie event listenerswie im folgenden Beispiel definieren :

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

@ Mark Rajcok bot eine großartige Lösung für Ionenprojekte, die eine Eingabe vom Bereichstyp enthalten.

In jedem anderen Fall von Nicht-Ionen-Projekten werde ich Folgendes vorschlagen:

HTML:

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

Komponente:

    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);

    }

Die Idee hier:

1. Lassen Sie die (ngModelChange)Methode den Setter-Job ausführen:

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

2. Aktivieren des direkten Zugriffs auf das native Dom-Element mithilfe dieses Aufrufs:

   eRef.value = eventStrToReplace;