कोणीय 2 - चयन/विकल्प

से मूल्य प्राप्त करने के लिए कैसे करें कोणीय 2 काम के लिए चयन/विकल्प समाधान का बहुमत इस तरह से है कि हम वास्तविक सामग्री को वापस करते हैं, value विशेषता नहीं। हालांकि, चूंकि मैं अभी भी कोणीय 2 सीख रहा हूं, इसलिए मैं बटन पर क्लिक करने के लिए वास्तविक value विशेषता प्राप्त करना चाहता हूं। मैं कुछ हद तक इस मुद्दे को हल करने में कामयाब रहा, लेकिन मुझे यकीन नहीं है कि यह सही दृष्टिकोण है या नहीं।कोणीय 2 - चयन/विकल्प

<select _ngcontent-oom-3=""> 
    <!--template bindings={}--> 
    <option _ngcontent-oom-3="">stuff 1</option> 
    <option _ngcontent-oom-3="">stuff 2</option> 
    <option _ngcontent-oom-3="">stuff 3</option> 
</select>

नीचे समाधान:

<select #selectedCategory> 
    <option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option> 
</select> 

<button (click)="getValueFromSelect(selectedCategory.value)"> 

/* This returns the selected category.name, not the value attribute. */

समाधान ऊपर निम्न HTML (option पर value विशेषता की कमी पर ध्यान दें) बनाता है: नीचे मैं इसे कैसे काम करना चाहते हैं के उदाहरण है वास्तव में काम करता है, हालांकि, इसे काम करने के लिए मुझे ngModel की आवश्यकता है।

<select [(ngModel)]="selectedCategory"> 
    <option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option> 
</select> 
<button (click)="getValueFromSelect(selectedCategory.value)"> 
/* This returns the value attribute correctly; however, do I really need a ngModel for one value? */

इस स्थिति तक पहुंचने का सही तरीका क्या है?

आपके सुझावों के लिए धन्यवाद।

स्रोत

2016-04-21 uglycode

आपका "मैं इसे कैसे काम करना चाहता हूं" उदाहरण काम करता है: [plunker] (https://plnkr.co/edit/NZc3RWgERx2t2m1HWmCb?p=preview)। यह 'category.id' देता है जो चयनित विकल्प की' मान' संपत्ति को असाइन किया जाता है। मुझे यह दृष्टिकोण पसंद है, क्योंकि यह आपके घटक में कोई संपत्ति नहीं जोड़ता है। –

अच्छी तरह से यह वास्तव में अजीब है, मेरे उदाहरण में जब मैं चयन/विकल्प तत्व का निरीक्षण करता हूं, मेरे पास 'मान' विशेषता नहीं है। मैं मूल रूप से आपके उदाहरण को प्रतिलिपि/चिपकाता हूं - आपके प्लंकर में, यदि आप तत्व का निरीक्षण करते हैं, तो प्रत्येक विकल्प में 'मान' विशेषता होती है जबकि मेरा नहीं होता है। मैं जेनरेट किए गए HTML के साथ अपना मूल प्रश्न अपडेट करूंगा। – uglycode

एंगुलर बीटा का आप किस संस्करण का उपयोग कर रहे हैं? और क्या आपके पास कोई अन्य पुस्तकालय लोड है? –

के रूप में टिप्पणी में चर्चा की, "मैं कैसे करना चाहते हैं यह काम करने के लिए" उदाहरण के काम करता है कर सकता है:

<select #selectedCategory> 
    <option *ngFor="#category of categories" [value]="category.id"> 
    {{category.name}} 
    </option> 
</select> 

<button (click)="getValueFromSelect(selectedCategory.value)">click me</button>

Plunker

हालांकि, हम काम करने के लिए बीटा.15 का उपयोग करना चाहिए। अधिक जानकारी के लिए beta.15 के लिए changelog देखें:

का चयन करें: ngModel (e1e44a9) से मूल्य अलग-अलग सेट, बंद कर देता है #7975 #7978

मैं इस दृष्टिकोण पसंद करते हैं क्योंकि यह एक नहीं जोड़ता है घटक के लिए संपत्ति, और न ही हमें <form> टैग (जैसे @ थियरी के उत्तर में) का उपयोग करने की आवश्यकता है।

स्रोत

2016-04-22 14:31:55

आप एक नियंत्रण ngControl निर्देश के साथ इनलाइन परिभाषित इस्तेमाल कर सकते हैं: https://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd?p=preview:

<form> 
    <select #categoriesCtrl="ngForm" ngControl="categoriesCtrl"> 
    <option *ngFor="#category of categories" [value]="category.id"> 
     {{category.name}} 
    </option> 
    </select> 
    <button (click)="getValueFromSelect(categoriesCtrl.value)"> 
</form>

इस plunkr देखें।

स्रोत

2016-04-21 15:05:06

क्या आप कृपया बता सकते हैं कि वास्तव में' ngControl' क्या करता है, क्योंकि यह बहुत खराब दस्तावेज है (https: // angular.io/docs/js/latest/api/common/NgControl-class.html)? – uglycode

हां, सहमत हुए ;-) Con ट्रॉल्स को फॉर्म तत्वों के मानों तक पहुंच प्राप्त करना है, जब वे अपडेट करते हैं तो अधिसूचित किया जाए, सत्यापन (सिंक या एसिंक) लागू करें। उन्हें परिभाषित करने के दो तरीके हैं: 'ngControl' के साथ इनलाइन या 'ngFormControl' /' Formbuilder 'के साथ प्रोग्रामेटिक रूप से। अधिक जानकारी के लिए यह आलेख देखें: http://restlet.com/blog/2016/02/11/implementing-angular2-forms-beyond-basics-part-1/। –

मैंने आपके मामले में इनलाइन एक का उपयोग किया है, आपको केवल मूल्य प्राप्त करने की आवश्यकता है ताकि आपके घटक वर्ग में कोई प्रभाव न हो ... –

आप उपयोग कर change घटना कॉल

<form> 
     <select #categoriesCtrl (change)='SelectedValue = categoriesCtrl.value'> 
     <option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option> 
     </select> 
     <button (click)="getValueFromSelect()">Get value</button> 
    </form>

कार्य उदाहरण https://plnkr.co/edit/dQZgSyw6uc67UNhNDlZv?p=preview

स्रोत

2016-04-21 15:19:29

कोणीय 2 - चयन/विकल्प

उत्तर

संबंधित मुद्दे