onchange เทียบเท่าในเชิงมุม 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>

สิ่งที่เทียบเท่ากับ onchange ในเชิงมุมถ้ามีอยู่ ขอขอบคุณ

เราสามารถใช้ผูกเหตุการณ์เชิงมุมเพื่อตอบสนองต่อเหตุการณ์ 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)

ใน Angular คุณสามารถกำหนดได้event listenersตามตัวอย่างด้านล่าง:

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

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