কৌণিক 2 সমতুল্য


91

আমি আমার ইনপুট রেঞ্জের মান ফায়ারবেসে সংরক্ষণ করতে অবিচরণ ব্যবহার করছি, তবে আমার ত্রুটি আছে যারা বলে যে আমার ফাংশনটি সংজ্ঞায়িত হয়নি।

এটা আমার কাজ

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

এটি আমার এইচটিএমএল

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

কৌণিক ক্ষেত্রে অদলবদলের সমতুল্য, যদি একটি বিদ্যমান থাকে। ধন্যবাদ


4
(change), আরও 5 টি যেতে
এরিক মার্টিনেজ 21

উত্তর:


174

যে কোনও ডিওএম ইভেন্টের প্রতিক্রিয়া জানাতে আমরা কৌনিক ইভেন্ট বাইন্ডিং ব্যবহার করতে পারি । বাক্য গঠনটি সহজ। আমরা ডিওএম ইভেন্টের নামটিকে প্রথম বন্ধনী হিসাবে ঘিরে রেখেছি এবং এটিতে একটি উদ্ধৃত টেম্পলেট বিবৃতি অর্পণ করি। - রেফারেন্স

যেহেতু changeচালু আছে মান DOM ইভেন্টগুলি তালিকা , আমরা এটা ব্যবহার করতে পারেন:

(change)="saverange()"

আপনার বিশেষ ক্ষেত্রে, যেহেতু আপনি এনজিএমডেল ব্যবহার করছেন, আপনি এর পরিবর্তে দ্বি-মুখী বাইন্ডিংটি ভেঙে ফেলতে পারেন:

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


আশ্চর্যজনকভাবে এটি কোনও কারণে আমার পক্ষে কাজ করে না, ফাংশনটি বরখাস্ত করা হয়নি ..... কেন আমি নিশ্চিত তা নয়। এঙ্গুলারের সাম্প্রতিক সংস্করণে দেখে মনে হচ্ছে আপনাকে টাইপ পাঠ্যের ইনপুট উপাদানটির জন্য (ইনপুট) ব্যবহার করতে হবে।
ভ্লাদিমির দেশপোটোভিচ

10

কৌণিক ক্ষেত্রে আপনি event listenersনীচের উদাহরণের মতো পছন্দ করতে পারেন :

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

4
আপনার উত্তরে দয়া করে আরও তথ্য যুক্ত করার বিষয়ে বিবেচনা করুন
ইন্ডার

3

@ মারক রাজকোক আয়ন প্রকল্পগুলির জন্য একটি বিস্তৃত ধরণের ইনপুট অন্তর্ভুক্ত করার জন্য দুর্দান্ত সমাধান দিয়েছেন।

অয়ন প্রকল্পগুলির অন্য কোনও ক্ষেত্রে আমি এটি প্রস্তাব করব:

এইচটিএমএল:

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.