angular - angular2 中的 onchange 等价物

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>

angular 中的 onchange 是什么，如果存在的话。谢谢

Answer 1

We can use Angular event bindings to respond to any DOM event. The syntax is simple. We surround the DOM event name in parentheses and assign a quoted template statement to it. -- reference

因为 change 在 the list of standard DOM events 上，我们可以使用它:

(change)="saverange()"

---

在您的特定情况下，由于您使用的是 NgModel，因此您可以像这样分解双向绑定(bind):

[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)。