角度2で同等のonchange

Question 1

入力範囲の値をfirebaseに保存するためにonchangeを使用していますが、関数が定義されていないというエラーが発生します。

これが私の機能です

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>

存在する場合、角度のオンチェンジに相当するものは何ですか。ありがとうございました

Question 2

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

Question 3

Angularevent listenersでは、以下の例のように定義できます。

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

Question 4

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

    }

ここでのアイデア：

まかせ(ngModelChange)セッターの仕事をする方法を：

(ngModelChange)="range=saverange($event, points)
この呼び出しを使用して、ネイティブDom要素への直接アクセスを有効にします。

eRef.value = eventStrToReplace;