onChange, после чего эквивалента в angular2

Я использую 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 в angular, если он существует. спасибо

3 52
angularjs

3 ответа:

можно использовать угловые привязки событий ответить любое событие DOM. Синтаксис прост. Мы заключаем имя события DOM в круглые скобки и назначаем ему цитируемый оператор шаблона. -- ссылка

С change на список стандартных событий DOM, мы можем использовать это:

(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).

107

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

3

в угловой вы можете определить event listeners как в примере ниже:

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