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

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/12/…

— Prashobh

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-class': step == 'step1'}" '' the the int नाम के साथ

— Adriano Galesso Alves

टाइप तीन के लिए, वर्ग नाम और चेक का क्रम गलत है। यह प्रथम श्रेणी का नाम होना चाहिए जैसे कि [ngClass] = "{'my-class1': 1, 'my-class2': 2}"

— obaylis

ऐसा लगता है कि "टाइप थ्री" और "टाइप फोर" इस ​​तरह के विशिष्ट उपयोग [ngClass]="js expression returning html class string"हैं जो इस अर्थ में समान हैं

— याकॉव

धन्यवाद आदमी .. आप कमाल हैं

— प्रणव MS

एकदम सही जवाब दोस्त। बहुत बहुत धन्यवाद !

— अंजना सिल्वा

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/direct/.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

कोणीय प्रलेखन से: "तारांकन" कुछ अधिक जटिल चीज़ के लिए "सिंटैक्टिक शुगर" है। आंतरिक रूप से, कोणीय ने * ngIf विशेषता को <एनजी-टेम्पलेट> तत्व में अनुवाद किया है, मेजबान तत्व के चारों ओर लिपटे, इस तरह। * ngIf निर्देश। <एनजी-टेम्प्लेट> तत्व में ले जाया गया जहां यह एक संपत्ति बंधन बन गया, [एनजीआईएफ]। बाकी <div>, इसकी क्लास विशेषता सहित, <एनजी-टेम्प्लेट> तत्व के अंदर ले जाया गया। " - अधिक जानकारी @ angular.io/guide/structural-directives#the-asterisk--prefix

— Combine

वास्तव में, यह अधिक जटिल नहीं है, *बस तोप के रूप के बजाय एक सरल पर्यायवाची की अनुमति देता है।

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

Answer 3

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

उदाहरण :

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

Comments

मुझे लगता है कि यह स्वीकृत उत्तर होना चाहिए क्योंकि यह html वर्ग सेट करने के लिए Angular2 तरीका है (जिसके बारे में मुझे जानकारी नहीं थी और Google यहां लाया गया था)।

— 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

निम्नलिखित उदाहरणों के साथ आप 'IF ELSE' का उपयोग कर सकते हैं

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

Comments

मैंने पहला और दूसरा उपाय आजमाया। केवल दूसरे ने मेरे लिए काम किया

— user1238784

Answer 6

आप कक्षा के नाम को सशर्त रूप से लागू करने के लिए 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};
    }

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

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

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

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

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

Answer 10

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

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

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

Answer 11

इसके अतिरिक्त, आप विधि फ़ंक्शन के साथ जोड़ सकते हैं:

HTML में

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

घटक में

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

    return classes;
  }

Answer 12

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

[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 का अच्छा उदाहरण है।

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