onchange эквивалент в angular2

Question

Я использую onchange, чтобы сохранить значение моего диапазона ввода в firebase, но у меня есть ошибка, которая говорит, что моя функция не определена.

это моя функция

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

это мой 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> 

, что является эквивалентом OnChange в угловых, если один существует. спасибо

Answer 1

Мы можем использовать Angular event bindings реагировать на any DOM event. Синтаксис прост. Мы окружаем имя события DOM в круглых скобках и присваиваем ему оператор цитируемого шаблона. - reference

С change на the list of standard DOM events, мы можем использовать его:

(change)="saverange()" 

---

В вашем конкретном случае, так как вы используете NgModel, вы можете разбить двухстороннюю связывания, как это вместо:

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

Тогда

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

Однако при таком подходе saverange() вызывается с каждым нажатием клавиши, поэтому вам, вероятно, лучше использовать (change).

Answer 2

@Mark Rajcok дал отличное решение для ионных проектов, которые включают в себя вход типа диапазона.

В любом другом случае непредставления ионных проектов я предлагаю следующее:

HTML:

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

Компонент:

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

    } 

Идея здесь:

1. Позволить метод (ngModelChange) сделать сеттер работу:

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

2. Включение прямого доступа к родному элементу Dom, используя этот вызов:

   eRef.value = eventStrToReplace;