कोणीय 2 में सशर्त विशेषता कैसे जोड़ें?

Question

मैं सशर्त रूप checkedसे एक चेकबॉक्स में एक तत्व विशेषता कैसे जोड़ सकता हूं ?

एंगुलर के पिछले संस्करणों में था NgAttrऔर मुझे लगता है कि मुझे लगता है NgCheckedकि सभी कार्यक्षमता प्रदान करने के लिए लग रहे हैं। हालाँकि, ये विशेषताएँ कोणीय 2 में मौजूद नहीं हैं और मुझे यह कार्यक्षमता प्रदान करने का कोई अन्य तरीका नहीं दिखता है।

Comments

इन्हें भी देखें: stackoverflow.com/questions/36240736/…

— Matty

इसे भी देखें: stackoverflow.com/questions/42179150/…

— aloisdg

googler, यदि आप कोणीय घटक के लिए एक मान-कम विशेषता चाहते हैं, तो यहां देखें

— फ्रैंक Nocke

Answer 1

null इसे निकालता है:

[attr.checked]="value ? '' : null"

या

[attr.checked]="value ? 'checked' : null"

संकेत:

गुण बनाम गुण

जब आप जिस HTML तत्व को इस बाइंडिंग में जोड़ते हैं, उसके पास बाइंडिंग ( checkedइस मामले में) नाम के साथ कोई संपत्ति नहीं होती है और साथ ही कोई भी एंगुलर कंपोनेंट या निर्देश उसी एलिमेंट पर लागू नहीं होता है जिसमें ए है @Input() checked;, तो [xxx]="..."उसका उपयोग नहीं किया जा सकता है।

यह भी देखें कि HTML में गुणों और विशेषताओं के बीच अंतर क्या है?

जब इस तरह की कोई संपत्ति नहीं है तो क्या किया जाए

विकल्प हैं [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."आप क्या हासिल करने की कोशिश पर निर्भर करता है।

क्योंकि <input>केवल एक checkedविशेषता है, लेकिन कोई भी checkedसंपत्ति [attr.checked]="..."इस विशिष्ट मामले के लिए सही तरीका नहीं है।

विशेषताएँ केवल स्ट्रिंग मानों को संभाल सकती हैं

एक आम नुकसान यह भी है कि [attr.xxx]="..."बाइंडिंग के लिए मूल्य ( ...) हमेशा कठोर होता है। केवल गुण और @Input()बूलियन, संख्या, वस्तु, जैसे अन्य मूल्य प्रकार प्राप्त कर सकते हैं ...

तत्वों के अधिकांश गुण और गुण जुड़े हुए हैं और उनका नाम समान है।

संपत्ति-विशेषता कनेक्शन

जब विशेषता के लिए बाध्य होता है, तो गुण भी केवल विशेषता से कड़े मूल्य प्राप्त करता है।
जब संपत्ति के लिए बाध्य किया जाता है तो संपत्ति उसके लिए बाध्य मूल्य (बूलियन, संख्या, वस्तु, ...) और विशेषता फिर से कड़े मूल्य को प्राप्त करती है।

दो मामले जहां विशेषता और संपत्ति के नाम मेल नहीं खाते हैं।

• कोणीय 2.0 टेम्पलेट में लेबल करने के लिए "विशेषता" जोड़ने के दौरान त्रुटि

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (विवरण का पहला वाक्य देखें htmlFor property reflects the value of the for- forशायद काम नहीं किया क्योंकि यह C या जावास्क्रिप्ट में एक कीवर्ड है)

• कोल्पुलर को कोणीय 2 में ज्ञात मूल विशेषता क्यों नहीं है?

तब से कोणीय को बदल दिया गया था और इन विशेष मामलों के बारे में जानता है और उन्हें संभालता है ताकि आप किसी <label [for]="भी संपत्ति के अस्तित्व में होने के बावजूद भी बाँध सकें (उसी के लिए colspan)

Comments

आप "attr" को छोड़ सकते हैं। उपसर्ग।

— फिल्प स्टाचोविक

@FilipStachowiak तब यह एक विशेषता नहीं बनेगी। कई तत्वों पर विभिन्न गुण होते हैं जहां तत्व एक गुण के लिए बाध्य मूल्य को एक विशेषता (और दूसरी दिशा) भी दर्शाता है। इस मामले में आपको जरूरत नहीं है attr.। लेकिन अगर आप एक कस्टम विशेषता जोड़ना चाहते हैं, तो आपको निश्चित रूप से attr.उपसर्ग की आवश्यकता है

— Günter Zöchbauer

स्पष्ट होने के लिए, आपको इसके हिस्से की आवश्यकता है attr.। मैं सेट करने का प्रयास कर रहा था [href]और केवल यह चाहता था कि यदि आइटम की hrefसंपत्ति मौजूद है तो इसे सेट किया जाए । इसके बिना [attr.href]'null' के मान के साथ एक href जुड़ जाएगा, जो क्लिक करने पर, वर्तमान पृष्ठ को रीफ्रेश करेगा। [attr.href]ठीक कर दिया।

— दुवद

@dewewad जो मेरे लिए सही नहीं है। यदि आप hrefएक ऐसे तत्व पर सेट करते hrefहैं जिसमें संपत्ति है, तो उपयोग करने की कोई आवश्यकता नहीं है attr। कुछ और गलत हुआ होगा।

— गुंटर ज़ोचबॉयर

@ günter-zöchbauer खैर, मैं Ng 4.x का उपयोग कर रहा हूं, और <a [href]="item.href">कहां item.hrefअपरिभाषित है (मान अपरिभाषित नहीं है, लेकिन संपत्ति hrefमौजूद नहीं है item) hrefविशेषता सेट कर रहा था null। मैंने स्रोत में तल्लीन नहीं किया, क्योंकि ईमानदारी से मैं इस बिंदु पर ज्यादा ध्यान नहीं देता (यह एक छोटा विवरण है), लेकिन attr.पूरी तरह से एक अलग निर्देश है और इसलिए यह अलग अभिनय करता है जो मेरे लिए कोई आश्चर्य की बात नहीं है।

— दुवद

Answer 2

में कोणीय -2 विशेषता वाक्यविन्यास है

<div [attr.role]="myAriaRole">

बाइंड्स अभिव्यक्ति myAriaRole के परिणाम में भूमिका निभाता है।

तो जैसे उपयोग कर सकते हैं

[attr.role]="myAriaRole ? true: null"

Comments

समस्या यहाँ है कि जब है your expressionहै falseडोम में विशेषता की तरह दिखाई देगा <div checked="false">। मुझे नहीं लगता कि यह अभीष्ट प्रभाव है।

— गुंटर Zöchbauer

धन्यवाद, लेकिन मैंने पूछा कि सशर्त रूप से विशेषता कैसे जोड़ें, सशर्त रूप से असाइन करें यह मान नहीं है।

— जोनाथन माइल्स

आप भी "attr" को छोड़ सकते हैं। उपसर्ग।

— फिलीप स्टाचोविक

@FilipStachowiak तब यह एक विशेषता नहीं बनेगी। कई तत्वों पर विभिन्न गुण होते हैं जहां तत्व एक गुण के लिए बाध्य मूल्य को एक विशेषता (और दूसरी दिशा) भी दर्शाता है। इस मामले में आपको जरूरत नहीं है attr.। लेकिन अगर आप एक कस्टम विशेषता जोड़ना चाहते हैं, तो आपको निश्चित रूप से attr.उपसर्ग की आवश्यकता है

— Günter Zöchbauer

अरे यार, यह: नल अद्भुत है, बात यह थी कि यह सशर्त में इस्तेमाल किया जा सकता है! समाधान के लिए धन्यवाद।

— पिनारेला

Answer 3

रिफाइनिंग गुंटर ज़ोचबॉयर उत्तर:

यह अब अलग प्रतीत होता है। मैं सशर्त रूप से एक एंकर टैग के लिए हाइपर विशेषता को लागू करने के लिए ऐसा करने की कोशिश कर रहा था। आपको 'लागू न करें' मामले के लिए अपरिभाषित का उपयोग करना चाहिए। एक उदाहरण के रूप में, मैं सशर्त रूप से लागू किए गए href विशेषता वाले लिंक के साथ प्रदर्शित करूंगा।

हाइपर विशेषता के बिना एंकर टैग सादा पाठ बन जाता है, हाइपरलिंक कल्पना के अनुसार एक लिंक के लिए प्लेसहोल्डर का संकेत देता है ।

मेरे नेविगेशन के लिए, मेरे पास लिंक की एक सूची है, लेकिन उनमें से एक लिंक वर्तमान पृष्ठ का प्रतिनिधित्व करता है। मैं वर्तमान पृष्ठ लिंक को लिंक नहीं करना चाहता था, लेकिन फिर भी यह सूची में दिखाई देना चाहता है (इसकी कुछ कस्टम शैलियाँ हैं, लेकिन यह उदाहरण सरल है)।

<a [attr.href]="currentUrl !== link.url ? link.url : undefined">

यह एक स्पैन और एंकर टैग पर दो * एनजीआईएफ का उपयोग करने की तुलना में क्लीनर है, मुझे लगता है।

Answer 4

यदि यह एक इनपुट तत्व है तो आप कुछ लिख सकते हैं .... <input type="radio" [checked]="condition">हालत का मूल्य सही या गलत होना चाहिए।

शैली विशेषताओं के लिए भी ... <h4 [style.color]="'red'">Some text</h4>

Answer 5

आप इसका उपयोग कर सकते हैं।

<span [attr.checked]="val? true : false"> </span>

Comments

आपने 'वैली' के साथ अपने विशेषता मान की जाँच की। अगर यह सच हो जाता है तो बस सही रिटर्न अन्यथा गलत मूल्य रिटर्न

— WAPSivam

Answer 6

आप पहले से मौजूद scss के लिए HTML लिखने वाले किसी व्यक्ति के लिए बेहतर दृष्टिकोण का उपयोग कर सकते हैं।
एचटीएमएल

[attr.role]="<boolean>"

एससीएसएस

[role = "true"] { ... }

इस तरह से आपको <boolean> ? true : nullहर बार की जरूरत नहीं है ।

Comments

यह हर मामले में काम नहीं करता है। उदाहरण के लिए यह तत्व multipleपर विशेषता के साथ काम नहीं करता है select।

— स्मार्टमाउस

Answer 7

यहाँ, पैराग्राफ़ केवल 'अमान्य' है, सच है / इसमें कोई मूल्य नहीं है

<p *ngIf="isValid ? true : false">Paragraph</p>

Answer 8

मैं टूलटिप ही लेना चाहता था एक विशेष क्षेत्र के लिए जैसा कि कोड में नीचे जोड़ा गया है, लेकिन आप टूलटिप को ऐसे गुणक पर रखना चाहते हैं जिसके उपयोग से आप एक सरणी वल्डीटेट कर सकें:

एकाधिक तत्वों में कस्टम डेटा-टूलटिप है विशेषता है:

1: [ 'Key1ToHaveTooltip', 'key2ToHaveTooltip']] शामिल हैं (कुंजी)

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip']। indexOf (की)> -1।

1 से अधिक तत्व पर टूलटिप विशेषता है।

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

Answer 9

इनलाइन-मैप्स भी आसान हैं।

वे थोड़े अधिक स्पष्ट और पठनीय हैं।

[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"

यदि आप टर्नरी सिंटैक्स या ngIfएस (आदि) को पसंद नहीं करते हैं, तो उसी चीज़ को पूरा करने का दूसरा तरीका ।

Comments

एक वर्ग एक विशेषता की तुलना में पूरी तरह से अलग है (सवाल क्या है)

— गुंटर ज़ोचाउर

आप इस प्रश्न का उचित उत्तर देने के लिए भी प्रयास कर सकते हैं, फिर मेरे पास अपने वोट पर पुनर्विचार करने का एक कारण था और मैं भी नीचे टिप्पणी करने के लिए आपको अंधेरे में रखने के लिए एक टिप्पणी को जोड़ने के बिना डाउनवोट कर सकता था।

— गुंटर ज़ोचबॉयर

@ कोडी आपको समझा सकता है (उदाहरण कोड दें) आपकी विधि checkedविशेषता के साथ कैसे काम करेगी (इनपुट टैग से इसे जोड़ें / हटाएं) <input type="checkbox" name="vehicle" value="Car" checked>? (यदि हम बदल classकरने के लिए checkboxइसे अपने कोड में नहीं काम (मैं इस जाँच करता है))

— कामिल Kiełczewski