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> 

什么是平变化的角度等价，如果存在。 谢谢

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;