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事件绑定来响应任何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).

Answer 2

您可以使用：

<input (input)="saverange()>

Answer 3

@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)方法完成 Setter 工作：

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

2. 使用此调用启用对本机 Dom 元素的直接访问：

   eRef.value = eventStrToReplace;

Answer 4

在Angular中，您可以event listeners像以下示例中那样进行定义：

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