onchange कोणीय 2 में बराबर

Question

मैं अपने इनपुट रेंज के मूल्य को फायरबेस में सहेजने के लिए 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>

कोणीय में ऑन्चेंज के बराबर क्या है, अगर कोई मौजूद है। धन्यवाद

Comments

(change), 5 अधिक जाने के लिए

— एरिक मार्टिनेज

Answer 1

हम किसी भी DOM ईवेंट का जवाब देने के लिए कोणीय ईवेंट बाइंडिंग का उपयोग कर सकते हैं । वाक्य विन्यास सरल है। हम कोष्ठक में DOM ईवेंट नाम को घेरते हैं और इसे एक उद्धृत टेम्प्लेट स्टेटमेंट असाइन करते हैं। - संदर्भ

के बाद से changeपर है मानक डोम घटनाओं की सूची है, हम इसका इस्तेमाल कर सकते हैं:

(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)।

Comments

अजीब तरह से यह मेरे लिए किसी कारण से काम नहीं करता है, फ़ंक्शन को निकाल नहीं दिया जाता है ..... मुझे यकीन नहीं है कि क्यों। प्रकार के पाठ के इनपुट तत्व के लिए, आपको (इनपुट) उपयोग किए जाने वाले कोणीय के हाल के संस्करण में दिखता है।

— व्लादिमीर डेस्पोटोविक

Answer 2

कोणीय में आप event listenersनीचे दिए गए उदाहरण की तरह परिभाषित कर सकते हैं :

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

Comments

कृपया अपने उत्तर में अधिक जानकारी जोड़ने पर विचार करें

— Inder

Answer 3

@ मर्क राजकोक ने आयन परियोजनाओं के लिए एक शानदार समाधान दिया जिसमें एक श्रेणी प्रकार इनपुट शामिल है।

गैर आयन परियोजनाओं के किसी अन्य मामले में मैं यह सुझाव दूंगा:

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)सेटर का काम करने की विधि बताए:

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

2. इस कॉल का उपयोग करके मूल डोम तत्व तक सीधी पहुंच सक्षम करना:

   eRef.value = eventStrToReplace;