কৌণিক 2 এ এনজি ক্লাসের অভ্যন্তরে গতিশীল শ্রেণীর নাম

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>

কাজ করবে তবে এনজিক্লাস ব্যবহারের অতিরিক্ত সুবিধা হ'ল এটি অন্য কোনও পদ্ধতি (যেমন: [class.xyz]নির্দেশিকা বা classবৈশিষ্ট্য, ইত্যাদি) দ্বারা যুক্ত অন্যান্য ক্লাসগুলিকে ওভাররাইট করে নাclass ।

কৌণিক 9 আপডেট

নতুন সংকলক, আইভী, যখন একই উপাদানটিতে বিভিন্ন ধরণের শ্রেণিবদ্ধ হয় তখন কী ঘটেছিল তার আরও স্পষ্টতা এবং ভবিষ্যদ্বাণীতা নিয়ে আসে। এখানে এটি সম্পর্কে আরও পড়ুন.

ngClass তিন ধরণের ইনপুট নেয়

অবজেক্ট: প্রতিটি কী একটি সিএসএস শ্রেণীর নামের সাথে মিলে যায়, আপনার ডায়নামিক কী থাকতে পারে না, কারণ key 'key' "key"সবগুলি সমান, এবং [key]এএএফআইকে সমর্থন করে না।
অ্যারে: কেবল ক্লাসের তালিকা থাকতে পারে, কোনও শর্ত নেই, যদিও টের্নারি অপারেটর কাজ করে
স্ট্রিং / এক্সপ্রেশন: ঠিক সাধারণ শ্রেণীর বৈশিষ্ট্যের মতো

— অঙ্কিত সিং
সূত্র

আমি কীভাবে .scss ফাইলের মধ্যে গতিশীলভাবে সিএসএস ক্লাস লিখতে পারি। প্রাক্তন হিসাবে: আমি একটি "ওভারলে" ক্লাস লিখেছি। এই শ্রেণিটি ডিভিতে ব্যবহৃত হচ্ছে যা একটি লুপের অভ্যন্তরে সরে যেতে শুরু করে। এই ওভারলে ক্লাসটি ব্যবহার করে একাধিক ডিভ থাকবে। আমি এই শ্রেণীর সাথে লুপ সূচকটি সংযুক্ত করতে চাই যেমন ওভারলে -1, ওভারলে -2 ইত্যাদি it এটি কি সম্ভব?

— সন্দীপ

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 }"

— Issam
সূত্র

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