संपत्ति के लिए बाध्यकारी राज्य के लिए [(ngModel)] और [ngModel] के बीच अंतर?

Question

यहाँ एक टेम्पलेट उदाहरण है:

<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">

<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">

यहां दोनों एक ही काम करते हैं। कौन सा पसंद किया जाता है और क्यों?

Comments

[ngModel]- यह केवल बाइंडिंग नहीं बल्कि दो तरह से प्रॉपर्टी बाइंडिंग है। इसलिए नए मूल्य में प्रवेश करने से अपडेट नहीं होगा overRideRate।

— वादिम

[(ngModel)] दो तरह से बाध्यकारी है जो कोणीय 2 से आता है। [ngModel] सिर्फ दिखाने के लिए है।

— डेविड दोन

पदावनति चेतावनी: कोणीय ६ में, ( angular.io/api/forms/FormControlName#use-with-ngmodel ) यह बताता है: प्रतिक्रियाशील रूप निर्देशों के साथ ngModel इनपुट संपत्ति और ngododChange घटना का उपयोग करने के लिए समर्थन कोणीय v6 में पदावनत किया जाएगा और होगा। कोणीय v7 में हटाया गया। इसे भी देखें: ( stackoverflow.com/questions/50371079/… )

— sboggs11

sboggs10 आपके द्वारा प्रदान किया गया लिंक, प्रतिक्रियाशील रूपों के साथ ngModel के संयोजन को संदर्भित करता है, यह लगभग मामलों में प्रश्न से संबंधित नहीं है।

— सीजर लियोनार्डो ओचोआ कॉन्ट्रास

यहाँ के बारे में एक अच्छी व्याख्या है [(ngModel)], दो-तरफ़ा डेटा बाइंडिंग इन

— एंगुलर

Answer 1

[(ngModel)]="overRideRate" का संक्षिप्त रूप है [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"को बांधना overRideRateहैinput.value
• (ngModelChange)="overRideRate = $event"जब ईवेंट को उत्सर्जित किया गया था overRideRate, input.valueतो उसके मूल्य के साथ अद्यतन करना है change।

साथ में वे दो-तरफ़ा बंधन के लिए Angular2 प्रदान करते हैं।

Answer 2

[ngModel]="currentHero.name" एक तरफ़ा बंधन के लिए वाक्यविन्यास है, जबकि,

[(ngModel)]="currentHero.name" दो-तरफ़ा बाइंडिंग के लिए है, और सिंटैक्स यौगिक है:

[ngModel]="currentHero.name" तथा (ngModelChange)="currentHero.name = $event"

यदि आपको केवल मॉडल पास करने की आवश्यकता है, तो पहले वाले का उपयोग करें। यदि आपके मॉडल को परिवर्तन की घटनाओं को सुनना है (उदाहरण के लिए इनपुट फ़ील्ड मान में परिवर्तन होता है), तो दूसरे का उपयोग करें।

Answer 3

यह काफी सरल है [] => घटक से टेम्पलेट () => घटक के [(ngModel)]लिए एक अनुबंधित रूप है[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

यहां और अधिक विवरण: https://angular.io/docs/ts/latest/guide/template-synaxax.html##MModel!

Answer 4

कोणीय 2 + डेटा प्रवाह:

कोणीय में डेटा मॉडल (घटक वर्ग ts.file) और दृश्य (घटक का HTML) निम्न शिष्टाचार के बीच प्रवाह कर सकते हैं:

1. मॉडल से दृश्य तक।
2. देखने के लिए मॉडल से।
3. डेटा दोनों दिशाओं में बहता है, जिसे 2 तरह से डेटा बाइंडिंग भी कहा जाता है ।

वाक्य - विन्यास:

देखने के लिए मॉडल:

<input type="text" [ngModel]="overRideRate">

इस सिंटैक्स को संपत्ति बंधन के रूप में भी जाना जाता है । अब यदि overRideRateइनपुट फ़ील्ड की संपत्ति दृश्य बदल जाती है तो स्वचालित रूप से अपडेट हो जाएगी। हालाँकि अगर उपयोगकर्ता किसी संख्या में प्रवेश करता है तो overRideRate संपत्ति अपडेट नहीं होगी।

मॉडल के लिए देखें:

(input)="change($event)"            // calling a method called change from the component class
(input)="overRideRate=$event.target.value" // on input save the new value in the title property

यहाँ क्या होता है कि एक घटना शुरू होती है (इस मामले में इनपुट घटना, लेकिन कोई भी घटना हो सकती है)। हम तब घटक वर्ग के तरीकों को कॉल कर सकते हैं या सीधे वर्ग की संपत्ति में संपत्ति को बचा सकते हैं।

2-तरह से डेटा बाइंडिंग:

<input [(ngModel)]="overRideRate" type="text" >

निम्न सिंटैक्स का उपयोग 2-वे डेटा बाइंडिंग के लिए किया जाता है। यह मूल रूप से दोनों के लिए एक कृत्रिम चीनी है:

1. देखने के लिए बाध्यकारी मॉडल।
2. मॉडल के लिए बाध्यकारी दृश्य

अब हमारी कक्षा के अंदर कुछ परिवर्तन होते हैं, यह हमारे दृश्य (मॉडल को देखने के लिए) को प्रतिबिंबित करेगा, और जब भी उपयोगकर्ता इनपुट बदलता है तो मॉडल को अपडेट किया जाएगा (मॉडल को देखें)।

Answer 5

[ngModel]कोड का मूल्यांकन करता है और एक आउटपुट उत्पन्न करता है (दो तरफा बंधन के बिना) ।
[(ngModel)]कोड का मूल्यांकन करता है और एक आउटपुट उत्पन्न करता है और दो-तरफ़ा बाइंडिंग को भी सक्षम बनाता है ।