变化当量(角)2

我正在使用 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>

如果有的话，角度变化的等价物是什么。 谢谢你

344448 次浏览
小开
最佳答案

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

Since change is on the list of standard DOM events, we can use it:

(change)="saverange()"

In your particular case, since you're using NgModel, you could break up the two-way binding like this instead:

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

Then

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

However, with this approach saverange() is called with every keystroke, so you're probably better off using (change).

小开

@Mark Rajcok gave a great solution for ion projects that include a range type input.

In any other case of non ion projects I will suggest this:

HTML:

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

Component:

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


}

The idea here:

  1. Letting the (ngModelChange) method to do the Setter job:

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

  2. Enabling direct access to the native Dom element using this call:

    eRef.value = eventStrToReplace;

小开

In Angular you can define event listeners like in the example below:

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

You can use:

<input (input)="saverange()>

提交答案