(परिवर्तन) बनाम (ngModelChange) कोणीय में

Question

कोणीय 1 onchange()घटना को स्वीकार नहीं करता है , यह केवल ng-change()घटना को स्वीकार करता है ।

दूसरी ओर, कोणीय 2, दोनों घटनाओं (change)और (ngModelChange)घटनाओं को स्वीकार करता है , जो दोनों एक ही काम करते हुए प्रतीत होते हैं।

क्या फर्क पड़ता है?

कौन सा प्रदर्शन के लिए सबसे अच्छा है?

ngModelChange :

<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

मैं उन लोगों की तुलना नहीं करना चाहता। मैं सिर्फ यह जानना चाहता हूं कि प्रदर्शन के लिए कौन सा सबसे अच्छा है?

— रमेश राजेंद्रन

हाँ, कोई तुलना नहीं है। यदि आप ngModel का उपयोग कर रहे हैं तो आप बाद में अन्यथा पहले का उपयोग कर सकते हैं। यह हमेशा दो तरह से डेटा बाइंडिंग के रूप में ngModel से बचने के लिए पसंद किया, इसलिए प्रदर्शन के लिए बुरा है

— Vamshi

"क्या अंतर है" और "जो अधिक प्रदर्शनशील है" पर जोर देने के लिए व्यक्तिवाद को हटाने के लिए संपादित किया गया और फिर से खोलने के लिए मतदान किया गया।

— रफिन

कोणीय 7 में, (ngModelChange) = "eventHandler ()" से पहले [(ngModel)] के मान को आग लगा देगा। = "मान" को बदल दिया जाता है जबकि (परिवर्तन) = "eventHandler ()" से आग लगने से बंधे मूल्य से आग लग जाएगी। [(ngModel)] = "मान" बदल गया है।

— CAK2

वैसे, (परिवर्तन) घटना को केवल तभी निकाल दिया जाता है जब फोकस इनपुट छोड़ देता है। यदि आप चाहते हैं कि प्रत्येक की-प्रेस के बाद कोई ईवेंट निकाल दिया जाए, तो आप इनपुट (इनपुट) ईवेंट का उपयोग कर सकते हैं।

— जॉन गिल्मर

Answer 1

(change) शास्त्रीय इनपुट परिवर्तन घटना के लिए बाध्य घटना।

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

भले ही आपके इनपुट में मॉडल न हो, तब भी आप (परिवर्तन) घटना का उपयोग कर सकते हैं

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

(ngModelChange)है @OutputngModel निर्देश की। यह तब बदलता है जब मॉडल बदल जाता है। आप ngModel निर्देश के बिना इस ईवेंट का उपयोग नहीं कर सकते।

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

यदि मैं एनस्मॉडल ऑब्जेक्ट के साथ परिवर्तन घटना का उपयोग कर रहा हूं तो क्या होगा?

— रमेश राजेन्द्रन

@RameshRajendran मैंने उत्तर में सुधार किया है। आप अभी भी ngModel ऑब्जेक्ट के साथ परिवर्तन इवेंट का उपयोग कर सकते हैं, लेकिन इवेंट इवेंट ईवेंट पैरामीटर पास करता है, ngModelChange इवेंट नए मान से गुजरता है।

— omeralper

हाँ +1। लेकिन मुझे ngmodelchange के साथ एक समस्या है, जब आप ctr + A. का उपयोग करके टेक्स्ट बॉक्स से सभी मानों को साफ़ करते हैं तो ngModelChange ट्रिगर नहीं होता है।

— रमेश राजेंद्रन

<input (ngModelChange)="modelChanged($event)">सही नहीं है, [ngModel]आवश्यक है।

— ई-क्लाउड

कुछ, आप ऐसा नहीं कर सकते (change), इस मामले में, आप एक(onClick)="yourFunction(youParameter)"

— jpmottin

Answer 2

कोणीय 7 में, (ngModelChange)="eventHandler()"वसीयत को बदले जाने वाले मूल्य से पहले आग लग जाएगी [(ngModel)]="value"जबकि (change)="eventHandler()"वसीयत को बदले जाने वाले मूल्य के बाद आग लग जाएगी [(ngModel)]="value"।

Comments

मैंने Angular 7.1 में परीक्षण किया और घटना को कॉल करने से पहले ngModel से वैल्यू अपडेट की जाती है। इसलिए मैं यही प्रयोग करता हूं

— जहरेंस्की

यह कोणीय 6 में भी काम किया। मेरे समय की बचत के लिए +1 :)

— हेमाद्री दासरी

क्या यह दूसरा रास्ता नहीं है? दृश्य मॉडल अपडेट के बाद कोणीय डॉक्स के अनुसार ngModelChangeआग।

— क्रोध

कोणीय के नवीनतम प्रलेखन में इस मामले का वर्णन किया गया है: angular.io/guide/…

— pioro90

एंगुलर 7.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

इस बारे में बताने के लिए शुक्रिया! जब तक मुझे आपका स्पष्टीकरण नहीं मिला, मुझे यह समस्या थी

— omostan

Answer 4

1 - (change) HTML onchange घटना के लिए बाध्य है। HTML onchange के बारे में प्रलेखन निम्नलिखित कहता है:

उपयोगकर्ता द्वारा किसी <select>तत्व के चयनित विकल्प को बदलने पर जावास्क्रिप्ट को निष्पादित करें

स्रोत: https://www.w3schools.com/jsref/event_onchange.asp

2 - जैसा कि पहले कहा गया है, (ngModelChange)आपके इनपुट से बंधे मॉडल चर के लिए बाध्य है।

तो, मेरी व्याख्या है:

• (change)ट्रिगर जब उपयोगकर्ता इनपुट बदलता है
• (ngModelChange) जब मॉडल बदलता है, तो यह उपयोगकर्ता की क्रिया के अनुरूप है या नहीं, इससे ट्रिगर होता है