onchange tương đương trong angle2

tôi đang sử dụng onchange để lưu giá trị của phạm vi đầu vào của mình vào firebase, nhưng tôi gặp lỗi khi nói rằng hàm của tôi không được xác định.

đây là chức năng của tôi

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

đây là html của tôi

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

tương đương với onchange trong góc, nếu tồn tại. cảm ơn bạn

Chúng ta có thể sử dụng liên kết sự kiện Angular để phản hồi bất kỳ sự kiện DOM nào . Cú pháp rất đơn giản. Chúng tôi đặt tên sự kiện DOM trong dấu ngoặc đơn và gán một câu lệnh mẫu được trích dẫn cho nó. - tham khảo

Vì changenằm trong danh sách các sự kiện DOM tiêu chuẩn , chúng tôi có thể sử dụng nó:

(change)="saverange()"

Trong trường hợp cụ thể của bạn, vì bạn đang sử dụng NgModel, bạn có thể phá vỡ ràng buộc hai chiều như sau:

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

Sau đó

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

Tuy nhiên, với cách tiếp cận saverange()này được gọi với mỗi lần nhấn phím, vì vậy có lẽ bạn nên sử dụng tốt hơn (change).

Trong Angular, bạn có thể định nghĩa event listenersnhư trong ví dụ dưới đây:

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

@Mark Rajcok đã đưa ra một giải pháp tuyệt vời cho các dự án ion bao gồm đầu vào loại phạm vi.

Trong bất kỳ trường hợp nào khác của các dự án phi ion, tôi sẽ đề xuất điều này:

HTML:

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

Thành phần:

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

    }

Ý tưởng ở đây:

1. Để (ngModelChange)phương thức thực hiện công việc Setter:

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

2. Cho phép truy cập trực tiếp vào phần tử Dom gốc bằng lệnh gọi này:

   eRef.value = eventStrToReplace;