कोणीय 2 में ngClass के अंदर डायनामिक क्लासनाम

122

मुझे एक ngClassअभिव्यक्ति के अंदर एक मूल्य को प्रक्षेपित करने की आवश्यकता है लेकिन मैं इसे काम करने के लिए नहीं कर सकता।

मैंने इन समाधानों की कोशिश की जो केवल वही हैं जो मुझे समझ में आते हैं, ये दोनों प्रक्षेप के साथ विफल होते हैं:

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

यह एक प्रक्षेप के साथ काम करता है लेकिन गतिशील रूप से जोड़े गए वर्ग के साथ विफल हो जाता है क्योंकि पूरी स्ट्रिंग एक वर्ग के रूप में जुड़ जाती है:

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

तो मेरा सवाल यह है कि आप ngClassइस तरह से डायनेमिक क्लासनेम का उपयोग कैसे करते हैं ?

angular

— Chrillewoodz
स्रोत

194

प्रयत्न

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

बजाय।

या

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

या और भी

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

काम करेगा लेकिन ngClass का उपयोग करने का अतिरिक्त लाभ यह है कि यह अन्य कक्षाओं को अधिलेखित नहीं करता है जो किसी अन्य विधि (जैसे: [class.xyz]निर्देश या classविशेषता, आदि) द्वारा जोड़ा जाता classहै।

कोणीय 9 अद्यतन

नए संकलक, आइवी, एक ही तत्व पर विभिन्न प्रकार के वर्ग-बाइंडिंग होने पर और अधिक स्पष्टता और भविष्यवाणी करता है। इस बारे में यहां और पढ़ें।

ngClass तीन प्रकार के इनपुट लेता है

ऑब्जेक्ट: प्रत्येक कुंजी सीएसएस वर्ग के नाम से मेल खाती है, आपके पास गतिशील कुंजी नहीं हो सकती है, क्योंकि key 'key' "key"सभी समान हैं, और [key]AFAIK समर्थित नहीं है।
सरणी: केवल कक्षाओं की सूची हो सकती है, कोई भी स्थिति नहीं, हालांकि टर्नरी ऑपरेटर काम करता है
स्ट्रिंग / अभिव्यक्ति: सामान्य वर्ग विशेषता की तरह

— अंकित सिंह
स्रोत

मैं अंदर एक सीएसएस क्लास कैसे लिख सकता हूं। एसएक्सएस गतिशील रूप से फाइल करता है। उदाहरण के लिए: मैंने "ओवरले" क्लास लिखी है। इस वर्ग का उपयोग एक div में किया जा रहा है जो लूप के अंदर व्यवस्थित हो रहा है। इस ओवरले क्लास का उपयोग करते हुए कई divs होंगे। मैं इस वर्ग के लिए लूप इंडेक्स संलग्न करना चाहता हूं जैसे ओवरले -1, ओवरले -2 आदि क्या यह संभव है?

— संदीप

18

यह काम करना चाहिए

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

लेकिन कोणीय इस वाक्यविन्यास पर फेंकता है। मैं इस पर विचार करूंगा। Https://stackoverflow.com/a/36024066/217408 भी देखें

दूसरे अमान्य हैं। आप []एक साथ उपयोग नहीं कर सकते {{}}। या तो एक या दूसरे से। {{}}इस परिणाम को कठोर बना देता है जिससे इस मामले में वांछित परिणाम नहीं होता है क्योंकि किसी वस्तु को पारित करने की आवश्यकता होती है ngClass।

प्लंकर उदाहरण

@A_Sing या द्वारा दिखाए गए सिंटैक्स को वर्कअराउंड के रूप में

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

इस्तेमाल किया जा सकता है।

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

2

यहाँ कुछ स्थितियों के साथ मैं कई वर्गों के लिए कर रहा हूँ, इसका एक उदाहरण है :

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

जहां:
classesएक वस्तु है जिसमें विभिन्न वर्णों के तार होते हैं। जैसेclass.icon.large = "app__icon--large"

यह गतिशील है! अद्यतन के रूप में शर्तों को अद्यतन करता है।

— ykadaru
स्रोत

1

मैं वर्ग बंधन को लागू करते समय कुछ महत्वपूर्ण बिंदुओं को ध्यान में रखना चाहता हूं।

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }"

यहां कक्षा सही ढंग से बाध्यकारी नहीं है क्योंकि एक शर्त को पूरा करना है, जबकि आपके पास दो समान कक्षाएं 'बैज-चेतावनी' हैं जिनकी दो अलग-अलग स्थिति हो सकती है। इसे ठीक करने के लिए

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }"

— इसाम
स्रोत

1

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

— शुभाशीष महता
स्रोत

0

आप उपयोग कर सकते हैं <i [className]="'fa fa-' + data?.icon"> </i>

— एंथोनी एगबेटर
स्रोत

1

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

— f.khantsis