javascript - कोणीय:*ngClass के साथ सशर्त वर्ग




css angular (10)

मेरे कोणीय कोड में क्या गलत है? मैं समझ रहा हूं:

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>

आप कक्षा नाम को सशर्त रूप से लागू करने के लिए ngClass का उपयोग कर सकते हैं और कोणीय में नहीं

उदाहरण के लिए

[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};
    }

आपको कुछ ( [ngClass] बजाय *ngClass ) का उपयोग करना चाहिए:

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


इसी से मेरा काम बना है:

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

एक अन्य समाधान का उपयोग किया जाएगा [class.active]

उदाहरण :

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

चलिए, YourCondition आपकी स्थिति है या बूलियन प्रॉपर्टी है, तो इस तरह से करें

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

जब मैं एक प्रतिक्रियाशील रूप बना रहा था, तो मुझे बटन पर 2 प्रकार के वर्ग असाइन करना था। मैंने इस तरह से इसे किया:

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

जब फॉर्म मान्य होता है, तो बटन में btn और btn-class (बूटस्ट्रैप से) होता है, अन्यथा बस btn वर्ग।


यह 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>

विकल्प दो के लिए MostafaMashayekhi के अपने जवाब का विस्तार करने के लिए> आप ',' के साथ कई विकल्पों की श्रृंखला भी बना सकते हैं

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

इसके अलावा * ngIf इन स्थितियों में से कुछ में आमतौर पर एक * ngFor के साथ जोड़ा जा सकता है

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

[ngClass] निर्देश के साथ प्रासंगिक नहीं है, लेकिन मुझे भी वही त्रुटि मिल रही थी

पर अपरिभाषित की संपत्ति 'हटा' नहीं पढ़ सकते हैं ...

और मुझे लगा कि मेरी [ngClass] स्थिति में त्रुटि है, लेकिन यह उस संपत्ति को बाहर कर देता है जिसे मैं [ngClass] की स्थिति में एक्सेस करने की कोशिश कर रहा था।

जैसे मेरे पास मेरी टाइपस्क्रिप्ट फ़ाइल थी

 element: {type: string}; 

और मेरे [ngClass] मैं उपयोग कर रहा था

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

और मुझे त्रुटि मिल रही थी

पर अपरिभाषित की संपत्ति 'प्रकार' नहीं पढ़ सकते हैं ...

और समाधान था मेरी संपत्ति को ठीक करना

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

आशा है कि यह किसी ऐसे व्यक्ति की मदद करता है जो एक संपत्ति की स्थिति का मुकाबला करने की कोशिश कर रहा है [ngClass]


[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 भी 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>






angular-ng-class