odpowiednik wymiany w kątowej 2

Używam onchange, aby zapisać wartość mojego zakresu wejściowego w Firebase, ale mam błąd, który mówi, że moja funkcja nie jest zdefiniowana.

to moja funkcja

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

to jest mój 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>

jaki jest odpowiednik zmiany w kątowej, jeśli taka istnieje. Dziękuję Ci

Możemy użyć powiązań zdarzeń Angular, aby odpowiedzieć na dowolne zdarzenie DOM . Składnia jest prosta. Otaczamy nazwę zdarzenia DOM w nawiasach i przypisujemy do niej cytowaną instrukcję szablonu. - odniesienie

Ponieważ changeznajduje się na liście standardowych zdarzeń DOM , możemy go użyć:

(change)="saverange()"

W twoim konkretnym przypadku, ponieważ używasz NgModel, możesz zamiast tego zerwać dwukierunkowe wiązanie w następujący sposób:

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

Następnie

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

Jednak przy takim podejściu saverange()jest wywoływane przy każdym naciśnięciu klawisza, więc prawdopodobnie lepiej jest użyć (change).

W Angular możesz zdefiniować event listenersjak w poniższym przykładzie:

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

@Mark Rajcok dał świetne rozwiązanie dla projektów jonowych, które obejmują wejście typu zakresu.

W każdym innym przypadku projektów niejonowych zasugeruję to:

HTML:

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

Składnik:

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

    }

Pomysł tutaj:

1. Pozwalając (ngModelChange)metodzie wykonać zadanie Settera:

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

2. Włączanie bezpośredniego dostępu do natywnego elementu Dom za pomocą tego wywołania:

   eRef.value = eventStrToReplace;