কৌণিক: * এনজিক্লাস সহ শর্তসাপেক্ষ শ্রেণি

Question

আমার কৌনিক কোডটি কী ভুল? আমি পাচ্ছি:

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ...

এইচটিএমএল

<ol class="breadcrumb">
    <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
    <li *ngClass="{active: step==='step2'}"  (click)="step='step2'">Step2</li>
    <li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

Comments

angulartutorial.net/2017/12/…

— প্রশভ

Answer 1

কৌনিক সংস্করণ 2, ..., 9 শর্তাধীন শ্রেণিগুলি যুক্ত করার বিভিন্ন উপায় সরবরাহ করে:

টাইপ এক

[class.my-class]="step === 'step1'"

টাইপ দুই

[ngClass]="{'my-class': step === 'step1'}"

এবং একাধিক বিকল্প:

[ngClass]="{'my-class': step === 'step1', 'my-class2':step === 'step2' }"

টাইপ তিন

[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"

টাইপ ফোর

[ngClass]="(step=='step1')?'my-class1':'my-class2'"

Comments

নিখুঁত উত্তর, কেবল 2 থেকে টাইপটি ঠিক করুন: [ngClass] = "my 'আমার-শ্রেণি': ধাপ == 'পদক্ষেপ 1'}" শ্রেণীর নাম দিয়ে '

— অ্যাড্রিয়ানো গ্যালেসো আলভেস

টাইপ থ্রি-র জন্য, শ্রেণীর নাম এবং চেকের ক্রমটি ভুল। এটি প্রথম শ্রেণীর নাম হওয়া উচিত যেমন [ngClass] = "my 'আমার-শ্রেণি 1': 1, 'আমার-

— শ্রেণি

দেখে মনে হচ্ছে "টাইপ থ্রি" এবং "টাইপ [ngClass]="js expression returning html class string"

— ফোর

ধন্যবাদ মানুষ .. আপনি দুর্দান্ত

— প্রণব এমএস

পারফেক্ট উত্তর সাথী। অনেক ধন্যবাদ !

— অঞ্জনা সিলভা

Answer 2

[ngClass]=...পরিবর্তে *ngClass।

* কাঠামোগত নির্দেশাবলীর জন্য কেবল সংক্ষিপ্ত আকারের বাক্য গঠন যেখানে আপনি উদাহরণস্বরূপ ব্যবহার করতে পারেন

<div *ngFor="let item of items">{{item}}</div>

পরিবর্তে দীর্ঘ সমতুল্য সংস্করণ

<template ngFor let-item [ngForOf]="items">
  <div>{{item}}</div>
</template>

এছাড়াও https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html দেখুন

<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Https://angular.io/docs/ts/latest/guide/template-syntax.html এও দেখুন

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>

Comments

কৌণিক ডকুমেন্টেশন থেকে: "অস্ট্রাস্টিকটি কিছুটা জটিল জটিল জিনিসের জন্য" সিনট্যাকটিক চিনি "Intern <ng-template> এলিমেন্টে স্থানান্তরিত হয়েছে যেখানে এটি সম্পত্তি বাঁধাই হয়েছে [[ngIf]। - আরো তথ্য @ angular.io/guide/structural-directives#the-asterisk--prefix

— একত্রিত

আসলে, এটি আরও জটিল কিছু নয়, *কেবল কামানিকাল ফর্মের পরিবর্তে একটি সরলিকৃত সিনাক্সের অনুমতি দেয়।

— গন্টার জ্যাচবাউয়ার

Answer 3

আরেকটি সমাধান ব্যবহার করা হবে [class.active]।

উদাহরণ:

<ol class="breadcrumb">
    <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>

Comments

আমি মনে করি এটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এটি এইচটিএমএল ক্লাসটি সেট করার অ্যাঙ্গুলার 2 উপায় (যা আমি জানতাম না এবং গুগল আমাকে এখানে নিয়ে এসেছিল)।

— kub1x

Answer 4

এটি সাধারণ কাঠামো ngClassহ'ল:

[ngClass]="{'classname' : condition}"

সুতরাং আপনার ক্ষেত্রে, কেবল এটির মতো ব্যবহার করুন ...

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

Answer 5

নিম্নলিখিত উদাহরণগুলির সাহায্যে আপনি 'যদি ই এল এস ই' ব্যবহার করতে পারেন

<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">

Comments

আমি প্রথম এবং দ্বিতীয় সমাধানটি চেষ্টা করেছিলাম। শুধুমাত্র দ্বিতীয়টি আমার জন্য কাজ করেছে

— ব্যবহারকারীর 1238784

Answer 6

আপনি ক্লাসের নামটি উভয় শর্তাধীন এবং কৌণিক ক্ষেত্রে নয় প্রয়োগ করার জন্য এনজি ক্লাস ব্যবহার করতে পারেন

উদাহরণ স্বরূপ

[ngClass]="'someClass'">

শর্তাধীন

[ngClass]="{'someClass': property1.isValid}">

একাধিক শর্ত

 [ngClass]="{'someClass': property1.isValid && property2.isValid}">

পদ্ধতি প্রকাশ

[ngClass]="getSomeClass()"

এই পদ্ধতিটি আপনার উপাদানটির অভ্যন্তরে থাকবে

 getSomeClass(){
        const isValid=this.property1 && this.property2;
        return {someClass1:isValid , someClass2:isValid};
    }

Answer 7

আপনার এমন কিছু ( [ngClass]পরিবর্তে *ngClass) ব্যবহার করা উচিত :

<ol class="breadcrumb">
  <li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
  (...)

Answer 8

ভিতরে Angular 7.X

সিএসএস ক্লাসগুলি এক্সপ্রেশন মূল্যায়নের ধরণের উপর নির্ভর করে নীচে আপডেট করা হয়েছে:

• স্ট্রিং - স্ট্রিং-এ তালিকাবদ্ধ সিএসএস ক্লাস যুক্ত করা হয়েছে (স্থান সীমান্তে)

• অ্যারে - অ্যারে উপাদান হিসাবে ঘোষিত সিএসএস ক্লাস যুক্ত করা হয়েছে

• অবজেক্ট - কীগুলি সিএসএস ক্লাস যা মানটিতে প্রদত্ত এক্সপ্রেশনটি সত্যবাদী মানকে মূল্যায়নের সময় যুক্ত করা হয়, অন্যথায় সেগুলি সরিয়ে ফেলা হয়।

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Answer 9

আমি একটি প্রতিক্রিয়াশীল ফর্ম তৈরি করার সময়, আমাকে বোতামে 2 ধরণের শ্রেণি নির্ধারণ করতে হয়েছিল। এটি আমি এটি করেছিলাম:

<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''" 
[disabled]="!formGroup.valid">Sign in</button>

ফর্মটি বৈধ হলে, বোতামটিতে বিটিএন এবং বিটিএন-শ্রেণি থাকে (বুটস্ট্র্যাপ থেকে), অন্যথায় কেবল বিটিএন ক্লাস হয়।

Answer 10

মোস্তাফা মাশায়েখিকে তার উত্তর দুটি বাড়ানোর জন্য বিকল্প দুটি> আপনি একটি ',' দিয়ে একাধিক বিকল্পের শৃঙ্খলা করতে পারেন

[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"

এছাড়াও * এনজিআইফ সাধারণত কিছু * এনজিফোর্ডের সাথে মিলিত এই পরিস্থিতিতে ব্যবহার করা যেতে পারে

class="mats p" *ngIf="mat=='painted'"

Answer 11

অতিরিক্তভাবে, আপনি পদ্ধতি ফাংশন সহ যুক্ত করতে পারেন:

এইচটিএমএলে

<div [ngClass]="setClasses()">...</div>

घटक.ts এ

// Set Dynamic Classes
  setClasses() {
    let classes = {
      constantClass: true,
      'conditional-class': this.item.id === 1
    }

    return classes;
  }

Answer 12

যাক, আপনার অবস্থাটি আপনার অবস্থা বা বুলিয়ান সম্পত্তি, তারপরে এটি করুন

[class.yourClass]="YourCondition"

Answer 13

ngClass বাক্য গঠন:

[ngClass]="{'classname' : conditionFlag}"

আপনি এটির মতো ব্যবহার করতে পারেন:

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

Answer 14

এটিই আমার পক্ষে কাজ করেছে:

[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

Answer 15

আপনি [ngClass] বা [class.classname] ব্যবহার করতে পারেন, উভয়ই একই কাজ করবে।
[class.my-class]="step==='step1'"

   অথবা

[ngClass]="{'my-class': step=='step1'}"

দুজনেই একই কাজ করবে!

Answer 16

[ngClass]নির্দেশের সাথে প্রাসঙ্গিক নয় তবে আমিও একই ত্রুটি পেয়ে যাচ্ছিলাম

অপরিশোধিত এর সম্পত্তি 'অপসারণ' পড়তে পারে না ...

এবং আমি আমার [ngClass]অবস্থার ত্রুটি বলে ভেবেছিলাম কিন্তু এটি যে অবস্থাতে অ্যাক্সেস করার চেষ্টা করছিলাম সে [ngClass]জায়গাটি আরম্ভ হয় নি।

আমার টাইপ স্ক্রিপ্ট ফাইলে এটির মতো ছিল

element: {type: string};

এবং আমার [ngClass]ব্যবহার ছিল

[ngClass]="{'active', element.type === 'active'}"

এবং আমি ত্রুটি পেয়েছিলাম

এখানে সংজ্ঞায়িত এর ধরণের 'ধরণ' পড়া যায় না ...

এবং সমাধানটি ছিল আমার সম্পত্তি ঠিক করা

element: {type: string} = {type: 'active'};

আশা করি এটি এমন কোনও ব্যক্তিকে সহায়তা করেছে যা কোনও সম্পত্তির শর্তের সাথে মেলে চেষ্টা করছে [ngClass]

Answer 17

<div class="collapse in " [ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''" id="collapseExampleOrganization" aria-expanded="true" style="">
 <ul> 	 <li class="nav-item" [ngClass]="{'active': active_tab=='manage'}">
<a routerLink="/main/organization/manage" (click)="activemenu('manage')"> <i class="la la-building-o"></i>
<p>Manage</p></a></li> 
<li class="nav-item" [ngClass]="{'active': active_tab=='assignservice'}"><a routerLink="/main/organization/assignservice" (click)="activemenu('assignservice')"><i class="la la-user"></i><p>Add organization</p></a></li>
</ul></div>

কোডটি এনজি ক্লাসের ভাল উদাহরণ যদি অন্য শর্ত থাকে।

[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"

[ngClass]="{'active': active_tab=='assignservice'}"

Answer 18

এই মত চেষ্টা করুন ..

'' দিয়ে আপনার ক্লাসটি সংজ্ঞায়িত করুন

<ol class="breadcrumb">
    <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li>
    <li *ngClass="{'active': step==='step2'}"  (click)="step='step2'">Step2</li>
    <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>