(পরিবর্তন) বনাম (এনজিমোডেল চ্যাঞ্জ) কৌণিক

Question

কৌনিক 1 onchange()ইভেন্টটি গ্রহণ করে না , এটি কেবল ng-change()ইভেন্টকেই গ্রহণ করে ।

অন্যদিকে কৌণিক 2, উভয় (change)এবং (ngModelChange)ইভেন্ট উভয়ই গ্রহণ করে , যা উভয়ই একই কাজ করে বলে মনে হচ্ছে।

পার্থক্য কি?

পারফরম্যান্সের জন্য কোনটি সেরা?

#ModelChange :

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

বনাম পরিবর্তন :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

Comments

আমি তাদের তুলনা করতে চাই না। আমি শুধু জানতে চাই কোনটি পারফরম্যান্সের জন্য সেরা?

— রমেশ রাজেন্দ্রন

হ্যাঁ কোনও তুলনা হয় না। আপনি যদি এনজিমোডেল ব্যবহার করে থাকেন তবে আপনি পরে ব্যবহার করতে পারেন অন্যথায় প্রথমটি। এটি সর্বদা এনজিএমডেল এড়াতে পছন্দ করে যেহেতু এটি দ্বিপথের ডেটা বাঁধাই, সুতরাং অভিনয়টির জন্য খারাপ

— বামশি

সাবজেক্টিভিটি অপসারণ করতে "কী পার্থক্য" এবং "যা আরও বেশি পারফরম্যান্ট" তার উপর জোর দেওয়ার জন্য সম্পাদিত এবং পুনরায় খুলতে ভোট দিয়েছেন।

— রাফিন

কৌণিক 7-তে, (ngModelChange) = "ইভেন্টহ্যান্ডলার ()" আবদ্ধ হবে মান [[(এনজিএমডেল)] এর পূর্বে = "মান" পরিবর্তিত হওয়ার সময় "পরিবর্তন" = "ইভেন্টহ্যান্ডলার ()" এর সাথে আবদ্ধ মানটির পরে গুলি চালাবে [(ngModel)] = "মান" পরিবর্তন করা হয়েছে।

— সিএকে 2

উপায় দ্বারা, (পরিবর্তন) ইভেন্টটি কেবল তখনই ফায়ার করা হয় যখন ফোকাসটি ইনপুট ছেড়ে যায়। আপনি যদি প্রতিটি কী-প্রেসের পরে কোনও ইভেন্ট বরখাস্ত করতে চান তবে আপনি (ইনপুট) ইভেন্টটি ব্যবহার করতে পারেন।

— জন গিলমার

Answer 1

(change) শাস্ত্রীয় ইনপুট পরিবর্তন ইভেন্টে আবদ্ধ ইভেন্ট।

https://developer.mozilla.org/en-US/docs/Web/Events/change

আপনার ইনপুটটিতে কোনও মডেল না থাকলেও আপনি (পরিবর্তন) ইভেন্টটি ব্যবহার করতে পারেন

<input (change)="somethingChanged()">

(ngModelChange) হয় @Output এনজিএমডেল নির্দেশিকা c মডেল পরিবর্তন হলে আগুন লাগে। আপনি এনজিএমডেল নির্দেশ ছাড়াই এই ইভেন্টটি ব্যবহার করতে পারবেন না।

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

আপনি উত্স কোডে আরও আবিষ্কার হিসাবে, (ngModelChange) করার সাথে সাথে নতুন মানটি নির্গত হয়।

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

সুতরাং এর অর্থ আপনার কাছে এরকম ব্যবহারের দক্ষতা রয়েছে:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

মূলত, দেখে মনে হয় দুটিয়ের মধ্যে কোনও বড় পার্থক্য নেই, তবে ngModelইভেন্টগুলি ব্যবহার করার সময় শক্তি অর্জন করে [ngValue]।

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>

dataChanged(newObj) {
    // here comes the object as parameter
}

ধরে নিন আপনি " ngModelজিনিস" ছাড়াই একই জিনিস চেষ্টা করে দেখুন

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>

changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}

Comments

আমি যদি এনজিএমডেল অবজেক্টের সাথে পরিবর্তন ইভেন্টটি ব্যবহার করি তবে কী হবে?

— রমেশ রাজেন্দ্রন

@ রামেশরাজেন্দ্রন আমি উত্তরটি উন্নত করেছি। আপনি এখনও এনজিমোডেল অবজেক্টের সাথে পরিবর্তন ইভেন্টটি ব্যবহার করতে পারেন, তবে ইভেন্ট ইভেন্ট প্যারামিটারটি পরিবর্তন করুন, এনজিমোডেল চেঞ্জ ইভেন্টটি নতুন মানটি পাস করবে।

— ওমরাল্পার

হ্যাঁ +1 তবে এনজিএমডেলচেঞ্জ নিয়ে আমার সমস্যা আছে, আপনি যখন সিটিআর + এ ব্যবহার করে পাঠ্য বাক্স থেকে সমস্ত মান মুছে ফেলেন তখন এনজিমোডেলচঞ্জ ট্রিগার করে না।

— রমেশ রাজেন্দ্রন

<input (ngModelChange)="modelChanged($event)">সঠিক নয়, [ngModel]প্রয়োজন।

— ই-মেঘ

কিছু, আপনি এটি করতে পারবেন না (change), (onClick)="yourFunction(youParameter)"

— এক্ষেত্রে

Answer 2

কৌণিক In-তে, আবদ্ধ মানটি পরিবর্তিত হওয়ার আগে উইলটি (ngModelChange)="eventHandler()"ফায়ার করা হয় তবে সীমাবদ্ধ মানটির পরিবর্তনের পরে উইলটি ফায়ার হয়।[(ngModel)]="value"(change)="eventHandler()"[(ngModel)]="value"

Comments

আমি কৌণিক .1.১ এ পরীক্ষা করে দেখেছি এবং এনজিএমডেল থেকে মানটি ইভেন্ট বলার আগেই আপডেট করা হয়। সুতরাং আমি

— এটিই

এটি কৌণিক 6 তেও কাজ করেছিল। আমার সময় বাঁচানোর জন্য +1 :)

— হেমাদ্রি দশারি

এটি কি অন্য পথে নয়? অ্যাংুলার ডক্স অনুসারে ngModelChangeভিউ মডেল আপডেট হওয়ার পরে আগুন লেগেছে ।

— রাগ

কৌনিকের

— গুইড

কৌণিক .2.২ এ, মানটি পরিবর্তিত হওয়ার আগে এবং পরিবর্তিত হওয়ার পরে(ngModelChange) ইভেন্টটি প্রকৃতপক্ষে চালিত হয় । তথ্যের জন্য ধন্যবাদ, সুপার সহায়ক! (change)

— ডেনিস আমেরেলিং

Answer 3

যেমন আমি খুঁজে পেয়েছি এবং অন্যটিতে লিখেছি বিষয়ে - এটি কৌণিক <7 এর ক্ষেত্রে প্রযোজ্য (এটি 7+ তে কীভাবে নিশ্চিত নয়)

শুধু ভবিষ্যতের জন্য

আমাদের [(ngModel)]="hero.name"এটি পর্যবেক্ষণ করা দরকার যে এটি কেবলমাত্র একটি শর্ট কাট যা ডি-সুগারড হতে পারে:[ngModel]="hero.name" (ngModelChange)="hero.name = $event"।

সুতরাং আমরা যদি ডি-চিনি কোডটি দিয়ে থাকি তবে আমরা এগুলি শেষ করব:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

অথবা

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

আপনি যদি উপরের কোডটি পরিদর্শন করেন তবে আপনি লক্ষ্য করবেন যে আমরা 2 দিয়ে শেষ করছি ngModelChange ইভেন্ট এবং সেগুলি কোনও ক্রমে কার্যকর করা দরকার।

সামিং আপ: আপনি যদি স্থানngModelChange আগে রাখেন তবে আপনি নতুন মান হিসাবে ngModelপাবেন $eventতবে আপনার মডেল অবজেক্টটি এখনও পূর্বের মানটি ধারণ করে। আপনি যদি এটি পরে ngModelরাখেন, মডেলটির ইতিমধ্যে নতুন মান থাকবে।

সূত্র

Comments

এটি নির্দেশ করার জন্য আপনাকে ধন্যবাদ! আপনার ব্যাখ্যাটি না পাওয়া পর্যন্ত আমার এই সমস্যা ছিল

— ওমস্টান

Answer 4

1 - (change) এইচটিএমএল অন্বেষণ ইভেন্টে আবদ্ধ। এইচটিএমএল অনচেঞ্জ সম্পর্কে ডকুমেন্টেশন নিম্নলিখিত বলে:

একটি জাভাস্ক্রিপ্ট কার্যকর করুন যখন কোনও ব্যবহারকারী কোনও <select>উপাদানটির নির্বাচিত বিকল্পটি পরিবর্তন করে

সূত্র: https://www.w3schools.com/jsref/event_onchange.asp

2 - যেমনটি আগে বলা হয়েছে, (ngModelChange)আপনার ইনপুটটিতে বাঁধা মডেল ভেরিয়েবলের সাথে আবদ্ধ।

সুতরাং, আমার ব্যাখ্যাটি হ'ল:

• (change)ট্রিগার যখন ব্যবহারকারী ইনপুট পরিবর্তন করে
• (ngModelChange) যখন মডেলটি পরিবর্তিত হয়, তা ব্যবহারকারী ক্রিয়াতে ক্রমাগত হোক বা না হোক ট্রিগার করে