blocks|key|2883948|text|Angular+version+2%2B提供了几种有条件地添加类的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2883949|类型one|offset|length|style|BOLD|2883950|[class.my_class]+=+"step+===+'step1'"|code-block|syntax|javascript|2883951|类型2|2883952|[ngClass]="{'my_class':+step+===+'step1'}"|2883953|和多个选项：|2883954|[ngClass]="{'my_class':+step+===+'step1',+'my_class2'+:+step+===+'step2'+}"|2883955|类型3|2883956|[ngClass]="{1+:+'my_class1',+2+:+'my_class2',+3+:+'my_class4'}[step]"|2883957|类型4|2883958|[ngClass]="step+==+'step1'+?+'my_class1'+:+'my_class2'"|2883959|entityMap^0|0|0|5|0|0|0|3|0|0|0|0|0|3|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|W|3|X|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|Y|3|Z|5|6|7|1J|8|@$D|1K|E|1L|F|G]]|9|@]|A|$]]|$1|10|3|11|5|J|7|1M|8|@]|9|@]|A|$K|L]]|$1|12|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|13|$]]

Angular version 2+ provides several ways to add classes conditionally:
type one
<pre><code>[class.my_class] = &quot;step === 'step1'&quot;
</code></pre>
type two
<pre><code>[ngClass]=&quot;{'my_class': step === 'step1'}&quot;
</code></pre>
and multiple option:
<pre><code>[ngClass]=&quot;{'my_class': step === 'step1', 'my_class2' : step === 'step2' }&quot;
</code></pre>
type three
<pre><code>[ngClass]=&quot;{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]&quot;
</code></pre>
type four
<pre><code>[ngClass]=&quot;step == 'step1' ? 'my_class1' : 'my_class2'&quot;
</code></pre>

blocks|key|121383|text|[ngClass]=...而不是*ngClass。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|121384|*仅用于结构化指令的简写语法，例如，您可以使用|121385|<div+*ngFor="let+item+of+items">{{item}}</div>|code-block|syntax|javascript|121386|而不是更长的等效版本|121387|<template+ngFor+let-item+[ngForOf]="items">
++<div>{{item}}</div>
</template>|121388|另请参阅https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html|121389|some-element+ngClass="'first'，‘second’“...+...+...+...|121390|121391|另请参阅https://angular.io/docs/ts/latest/guide/template-syntax.html|121392|121393|blockquote|121394|121395|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html|1|https://angular.io/docs/ts/latest/guide/template-syntax.html^0|0|D|G|8|0|0|1|0|0|0|0|4|21|0|0|0|0|4|1O|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1K|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|S|3|T|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1S|8|@]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|X|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|Z|7|1X|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]|19|$5|14|15|16|E|$17|1A]]]]

<code>[ngClass]=...</code> instead of <code>*ngClass</code>.

<code>*</code> is only for the shorthand syntax for structural directives where you can for example use

<pre class="lang-ts prettyprint-override"><code>&lt;div *ngFor="let item of items"&gt;{{item}}&lt;/div&gt;
</code></pre>

instead of the longer equivalent version

<pre class="lang-ts prettyprint-override"><code>&lt;template ngFor let-item [ngForOf]="items"&gt;
 &lt;div&gt;{{item}}&lt;/div&gt;
&lt;/template&gt;
</code></pre>

See also <a href="https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html" rel="noreferrer">https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html</a>

<blockquote>
<pre class="lang-ts prettyprint-override"><code>&lt;some-element [ngClass]="'first second'"&gt;...&lt;/some-element&gt;
&lt;some-element [ngClass]="['first', 'second']"&gt;...&lt;/some-element&gt;
&lt;some-element [ngClass]="{'first': true, 'second': true, 'third': false}"&gt;...&lt;/some-element&gt;
&lt;some-element [ngClass]="stringExp|arrayExp|objExp"&gt;...&lt;/some-element&gt;
&lt;some-element [ngClass]="{'class1 class2 class3' : true}"&gt;...&lt;/some-element&gt;
</code></pre>
</blockquote>

See also <a href="https://angular.io/docs/ts/latest/guide/template-syntax.html" rel="noreferrer">https://angular.io/docs/ts/latest/guide/template-syntax.html</a>

<blockquote>
<pre class="lang-ts prettyprint-override"><code>&lt;!-- toggle the "special" class on/off with a property --&gt;
&lt;div [class.special]="isSpecial"&gt;The class binding is special&lt;/div&gt;

&lt;!-- binding to `class.special` trumps the class attribute --&gt;
&lt;div class="special"
 [class.special]="!isSpecial"&gt;This one is not so special&lt;/div&gt;
</code></pre>
</blockquote>



<blockquote>
<pre class="lang-ts prettyprint-override"><code>&lt;!-- reset/override all class names with a binding --&gt;
&lt;div class="bad curly special"
 [class]="badCurly"&gt;Bad curly&lt;/div&gt;
</code></pre>
</blockquote>

blocks|key|2672497|text|另一种解决方案是使用[class.active]。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2672498|示例：|2672499|<ol+class="breadcrumb">
++++<li+[class.active]="step=='step1'"+(click)="step='step1'">Step1</li>
</ol>|code-block|syntax|javascript|2672500|entityMap^0|A|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Another solution would be using <code>[class.active]</code>.

Example :

<pre><code>&lt;ol class="breadcrumb"&gt;
 &lt;li [class.active]="step=='step1'" (click)="step='step1'"&gt;Step1&lt;/li&gt;
&lt;/ol&gt;
</code></pre>

blocks|key|118516|text|这是ngClass的正常结构：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|118517|[ngClass]="{'classname'+:+condition}"|code-block|syntax|javascript|118518|所以在你的情况下，就像这样使用它...|118519|<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>|118520|entityMap^0|2|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

That's the normal structure for <code>ngClass</code> is:

<pre><code>[ngClass]="{'classname' : condition}"
</code></pre>

So in your case, just use it like this...

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

blocks|key|2884161|text|在下面的示例中，您可以使用'IF+ELSE‘|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2884162|<p+class="{{condition+?+'checkedClass'+:+'uncheckedClass'}}">
<p+[ngClass]="condition+?+'checkedClass'+:+'uncheckedClass'">
<p+[ngClass]="[condition+?+'checkedClass'+:+'uncheckedClass']">|code-block|syntax|javascript|2884163|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

with the following examples you can use 'IF ELSE' 

<pre><code>&lt;p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}"&gt;
&lt;p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'"&gt;
&lt;p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']"&gt;
</code></pre>

blocks|key|118527|text|您可以使用ngClass来有条件地而不是在Angular中应用类名|type|unstyled|depth|inlineStyleRanges|entityRanges|data|118528|例如|118529|[ngClass]="'someClass'">|code-block|syntax|javascript|118530|Conditional|offset|length|style|BOLD|118531|[ngClass]="{'someClass':+property1.isValid}">|118532|多条件|118533|+[ngClass]="{'someClass':+property1.isValid+&&+property2.isValid}">|118534|方法表达式|118535|[ngClass]="getSomeClass()"|118536|此方法将位于组件内部|118537|+getSomeClass(){
++++++++const+isValid=this.property1+&&+this.property2;
++++++++return+{someClass1:isValid+,+someClass2:isValid};
++++}|118538|entityMap^0|0|0|0|0|B|0|0|0|3|0|0|0|5|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@$K|18|L|19|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1B|8|@$K|1C|L|1D|M|N]]|9|@]|A|$]]|$1|S|3|T|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1F|8|@$K|1G|L|1H|M|N]]|9|@]|A|$]]|$1|W|3|X|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1J|8|@$K|1K|L|1L|M|N]]|9|@]|A|$]]|$1|10|3|11|5|F|7|1M|8|@]|9|@]|A|$G|H]]|$1|12|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|13|$]]

You can use ngClass to apply the class name both conditionally and not in Angular

For Example 

<pre><code>[ngClass]="'someClass'"&gt;
</code></pre>

Conditional

<pre><code>[ngClass]="{'someClass': property1.isValid}"&gt;
</code></pre>

Multiple Condition

<pre><code> [ngClass]="{'someClass': property1.isValid &amp;&amp; property2.isValid}"&gt;
</code></pre>

Method expression

<pre><code>[ngClass]="getSomeClass()"
</code></pre>

This method will inside of your component

<pre><code> getSomeClass(){
 const isValid=this.property1 &amp;&amp; this.property2;
 return {someClass1:isValid , someClass2:isValid};
 }
</code></pre>

blocks|key|118481|text|你应该使用这样的东西([ngClass]而不是*ngClass)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|118482|<ol+class="breadcrumb">
++<li+[ngClass]="{active:+step==='step1'}"+(click)="step='step1;+'">Step1</li>
++(...)|code-block|syntax|javascript|118483|​|118484|entityMap^0|B|9|N|8|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

You should use something (<code>[ngClass]</code> instead of <code>*ngClass</code>) like that:

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

blocks|key|2672712|text|在Angular+7.X中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2672713|CSS类按如下方式更新，具体取决于表达式求值的类型：|2672714|2672715|字符串-添加字符串中列出的CSS类(空格分隔)|unordered-list-item|2672716|数组-添加声明为数组元素的CSS类|2672717|对象-键是当值中给定的表达式计算为真值时添加的CSS类，否则将删除它们。|2672718|2672719|<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%7CarrayExp%7CobjExp">...</some-element>

<some-element+[ngClass]="{'class1+class2+class3'+:+true}">...</some-element>|code-block|syntax|javascript|2672720|entityMap^0|1|B|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|12|8|@]|D|@]|E|$]]|$1|L|3|M|5|K|7|13|8|@]|D|@]|E|$]]|$1|N|3|O|5|K|7|14|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|15|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|16|8|@]|D|@]|E|$T|U]]|$1|V|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|W|$]]

In <code>Angular 7.X</code>

The CSS classes are updated as follows, depending on the type of the expression evaluation:

<ul>
<li>string - the CSS classes listed in the string (space delimited) are added</li>
<li>Array - the CSS classes declared as Array elements are added</li>
<li>Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.</li>
</ul>

<pre><code>&lt;some-element [ngClass]="'first second'"&gt;...&lt;/some-element&gt;

&lt;some-element [ngClass]="['first', 'second']"&gt;...&lt;/some-element&gt;

&lt;some-element [ngClass]="{'first': true, 'second': true, 'third': false}"&gt;...&lt;/some-element&gt;

&lt;some-element [ngClass]="stringExp|arrayExp|objExp"&gt;...&lt;/some-element&gt;

&lt;some-element [ngClass]="{'class1 class2 class3' : true}"&gt;...&lt;/some-element&gt;
</code></pre>

blocks|key|2672760|text|此外，您还可以添加with+method函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2672761|超文本标记语言中的|2672762|<div+[ngClass]="setClasses()">...</div>|code-block|syntax|javascript|2672763|component.ts中的|offset|length|style|BOLD|2672764|//+Set+Dynamic+Classes
++setClasses()+{
++++let+classes+=+{
++++++constantClass:+true,
++++++'conditional-class':+this.item.id+===+1
++++}

++++return+classes;
++}|2672765|entityMap^0|0|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Additionally, you can add with method function:

In HTML

<pre><code>&lt;div [ngClass]="setClasses()"&gt;...&lt;/div&gt;
</code></pre>

In component.ts

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

 return classes;
 }
</code></pre>

blocks|key|118581|text|要扩展MostafaMashayekhi对option+two>的回答，您还可以用'，‘链接多个选项|type|unstyled|depth|inlineStyleRanges|entityRanges|data|118582|[ngClass]="{'my-class':+step=='step1',+'my-class2':step=='step2'+}"|code-block|syntax|javascript|118583|此外，*ngIf可用于其中一些情况，通常与*ngFor结合使用|118584|class="mats+p"+*ngIf="mat=='painted'"|118585|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

to extend MostafaMashayekhi his answer for option two>
you can also chain multiple options with a ',' 

<pre><code>[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
</code></pre>

Also *ngIf can be used in some of these situations usually combined with a *ngFor

<pre><code>class="mats p" *ngIf="mat=='painted'"
</code></pre>

blocks|key|121691|text|Angular提供了多种方式来有条件地添加类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|121692|第一条路|offset|length|style|BOLD|121693|active是您的类名|121694|[class.active]="step+===+'step1'"|code-block|syntax|javascript|121695|Second+way|121696|121697|[ngClass]="{active':+step=='step1'}"|121698|Third+way|121699|通过使用三元运算符class1，class2是您的类名|121700|[ngClass]="(step=='step1')?'class1':'class2'"|121701|entityMap^0|0|0|4|0|0|0|0|A|0|0|0|0|9|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@$D|13|E|14|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|Q|3|I|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|S|5|L|7|1B|8|@]|9|@]|A|$M|N]]|$1|T|3|U|5|6|7|1C|8|@$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1F|8|@]|9|@]|A|$]]|$1|X|3|Y|5|L|7|1G|8|@]|9|@]|A|$M|N]]|$1|Z|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|10|$]]

Angular provides multiple ways to add classes conditionally:
First way
active is your class name
<pre><code>[class.active]=&quot;step === 'step1'&quot;
</code></pre>
Second way
active is your class name
<pre><code>[ngClass]=&quot;{active': step=='step1'}&quot;
</code></pre>
Third way
by using ternary operator class1 and class2 is your class name
<pre><code>[ngClass]=&quot;(step=='step1')?'class1':'class2'&quot;
</code></pre>

blocks|key|118710|text|你可以使用ngClass或class.classname，两者的工作方式是一样的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|118711|[class.my-class]="step==='step1'"|offset|length|style|CODE|118712|或|118713|[ngClass]="{'my-class':+step=='step1'}"|118714|两者的工作方式是一样的！|118715|entityMap^0|0|0|X|0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

You can use [ngClass] or [class.classname], both will work the same. 
<code>[class.my-class]="step==='step1'"</code> 
&nbsp;&nbsp; OR

<code>[ngClass]="{'my-class': step=='step1'}"</code>

Both will work the same!

blocks|key|119372|text|当我创建一个反应式窗体时，我必须在按钮上分配两种类型的类。我是这样做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|119373|<button+type="submit"+class="btn"+[ngClass]="(formGroup.valid)?'btn-info':''"+
[disabled]="!formGroup.valid">Sign+in</button>|code-block|syntax|javascript|119374|当表单有效时，按钮有btn和btn-class+(来自bootstrap)，否则只有btn类。|119375|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

While I was creating a reactive form, I had to assign 2 types of class on the button. This is how I did it:

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

When the form is valid, button has btn and btn-class (from bootstrap), otherwise just btn class.

blocks|key|2884189|text|假设YourCondition是您的条件或布尔型属性，则如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2884190|[class.yourClass]="YourCondition"|code-block|syntax|javascript|2884191|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Let, YourCondition is your condition or a boolean property, then do like this

<pre><code>[class.yourClass]="YourCondition"
</code></pre>

blocks|key|121497|text|这是对我有效的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|121498|[ngClass]="{'active':+dashboardComponent.selected_menu+==+'profile'}"|code-block|syntax|javascript|121499|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is what worked for me:

<pre><code>[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"
</code></pre>

blocks|key|121509|text|ngClass语法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|121510|[ngClass]="{'classname'+:+conditionFlag}"|code-block|syntax|javascript|121511|您可以像这样使用：|121512|<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>|121513|entityMap^0|0|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<code>ngClass</code> syntax:

<pre><code>[ngClass]="{'classname' : conditionFlag}"
</code></pre>

You can use like this: 

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

blocks|key|2672942|text|我们可以使用下面的语法使类成为动态的。在Angular+2+plus中，您可以通过多种方式完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2672943|[ngClass]="{'active':+arrayData.length+&&+arrayData[0]?.booleanProperty}"|code-block|syntax|javascript|2672944|[ngClass]="{'active':+step}"|2672945|[ngClass]="step==+'step1'?'active':''"|2672946|[ngClass]="step?+'active'+:+''"|2672947|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

We can make class dynamic by using following syntax. In Angular 2 plus, you can do this in various ways:
<pre><code>[ngClass]=&quot;{'active': arrayData.length &amp;&amp; arrayData[0]?.booleanProperty}&quot;
</code></pre>
<pre><code>[ngClass]=&quot;{'active': step}&quot;
</code></pre>
<pre><code>[ngClass]=&quot;step== 'step1'?'active':''&quot;
</code></pre>
<pre><code>[ngClass]=&quot;step? 'active' : ''&quot;
</code></pre>

blocks|key|2884245|text|与[ngClass]指令无关，但我也收到了相同的错误|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2884246|2884247|无法读取未定义的的属性'remove‘...|blockquote|2884248|2884249|2884250|我认为是我的[ngClass]条件中的错误，但事实证明，我试图在[ngClass]条件下访问的属性没有初始化。|2884251|就像我在我的打字文件里|2884252|element:+{type:+string};|code-block|syntax|javascript|2884253|在我的[ngClass]中，我使用了|2884254|[ngClass]="{'active',+element.type+===+'active'}"|2884255|我得到了一个错误|2884256|2884257|无法读取未定义的属性'type‘...|2884258|2884259|2884260|解决方案是将我的属性修复为|2884261|element:+{type:+string}+=+{type:+'active'};|2884262|我希望它能帮助那些正在尝试匹配[ngClass]中某个属性条件的人|2884263|entityMap^0|1|9|0|0|0|0|0|6|9|W|9|0|0|0|3|9|0|0|0|0|0|0|0|0|0|F|9|0^^$0|@$1|2|3|4|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|1H|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1P|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1Q|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|W|3|X|5|R|7|1U|8|@]|D|@]|E|$S|T]]|$1|Y|3|Z|5|6|7|1V|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|11|3|12|5|I|7|1X|8|@]|D|@]|E|$]]|$1|13|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|14|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|15|3|16|5|6|7|20|8|@]|D|@]|E|$]]|$1|17|3|18|5|R|7|21|8|@]|D|@]|E|$S|T]]|$1|19|3|1A|5|6|7|22|8|@$9|23|A|24|B|C]]|D|@]|E|$]]|$1|1B|3|-4|5|6|7|25|8|@]|D|@]|E|$]]]|1C|$]]

Not relevant with <code>[ngClass]</code> directive but I was also getting the same error as

<blockquote>
 Cannot read property 'remove' of undefined at...
</blockquote>

and I thought to be the error in my <code>[ngClass]</code> condition but it turned out the property I was trying to access in the condition of <code>[ngClass]</code> was not initialized.

Like I had this in my typescript file

<pre><code>element: {type: string};
</code></pre>

and In my <code>[ngClass]</code> I was using

<pre><code>[ngClass]="{'active', element.type === 'active'}"
</code></pre>

and I was getting the error

<blockquote>
 Cannot read property 'type' of undefined at...
</blockquote>

and the solution was to fix my property to

<pre><code>element: {type: string} = {type: 'active'};
</code></pre>

Hope it helps somebody who is trying to match a condition of a property in <code>[ngClass]</code>

blocks|key|2672767|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2672768|<div+class="collapse+in+"+[ngClass]="(active_tab=='assignservice'+%7C%7C+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">
Manage</a></li>+
<li+class="nav-item"+[ngClass]="{'active':+active_tab=='assignservice'}"><a+routerLink="/main/organization/assignservice"+(click)="activemenu('assignservice')"><i+class="la+la-user">Add+organization</a></li>
</ul></div>|code-block|syntax|javascript|2672769|2672770|代码是ngClass+if+else条件的一个很好的例子。|2672771|[ngClass]="(active_tab=='assignservice'+%7C%7C+active_tab=='manage')?'show':''"

[ngClass]="{'active':+active_tab=='assignservice'}"|2672772|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="collapse in " [ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''" id="collapseExampleOrganization" aria-expanded="true" style=""&gt;
 &lt;ul&gt; 	 &lt;li class="nav-item" [ngClass]="{'active': active_tab=='manage'}"&gt;
&lt;a routerLink="/main/organization/manage" (click)="activemenu('manage')"&gt; &lt;i class="la la-building-o"&gt;&lt;/i&gt;
&lt;p&gt;Manage&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; 
&lt;li class="nav-item" [ngClass]="{'active': active_tab=='assignservice'}"&gt;&lt;a routerLink="/main/organization/assignservice" (click)="activemenu('assignservice')"&gt;&lt;i class="la la-user"&gt;&lt;/i&gt;&lt;p&gt;Add organization&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;</code></pre>
</div>
</div>


Code is good example of ngClass if else condition. 

<pre><code>[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"

[ngClass]="{'active': active_tab=='assignservice'}"
</code></pre>

blocks|key|2672878|text|试着这样..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2672879|用'‘定义你的类|2672880|<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>|code-block|syntax|javascript|2672881|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try Like this..

Define your class with ''

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

blocks|key|121674|text|对于elseif语句(比较较少)，可以这样使用：(例如，比较三个语句)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|121675|<div+[ngClass]="step+===+'step1'+?+'class1'+:+(step+===+'step2'+?+'class2'+:+'class3')">+{{step}}+</div>|code-block|syntax|javascript|121676|entityMap^0|2|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

For <code>elseif</code> statement (less comparison) use like that: (For example you compare three statement)
<pre><code>&lt;div [ngClass]=&quot;step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')&quot;&gt; {{step}} &lt;/div&gt;
</code></pre>

blocks|key|2673056|text|该指令以三种不同的方式运行，具体取决于表达式计算为三种类型中的哪一种：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2673057|2673058|如果表达式的计算结果为字符串，则字符串应为一个或多个以空格分隔的类名。|ordered-list-item|2673059|如果表达式的计算结果为对象，则对于具有真值的对象的每个键值对，相应的键将用作类名。|2673060|如果表达式的计算结果为数组，则数组的每个元素都应该是类型1中的字符串或类型2中的对象。这意味着可以在数组中将字符串和对象混合在一起，以便更好地控制显示的CSS类。请参阅下面的代码以获取此示例。|2673061|2673062|++++[class.class_one]+=+"step+===+'step1'"

++++[ngClass]="{'class_one':+step+===+'step1'}"|code-block|syntax|javascript|2673063|对于多个选项：|2673064|++++[ngClass]="{'class_one':+step+===+'step1',+'class_two'+:+step+===+'step2'+}"+

++++[ngClass]="{1+:+'class_one',+2+:+'class_two',+3+:+'class_three'}[step]"

++++[ngClass]="step+==+'step1'+?+'class_one'+:+'class_two'"|2673065|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|Z|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|11|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|12|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|13|8|@]|9|@]|A|$N|O]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

The directive operates in three different ways, depending on which of three types the expression evaluates to:
<ol>
<li>If the expression evaluates to a string, the string should be one or more space-delimited class names.</li>
<li>If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.</li>
<li>If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.</li>
</ol>
<pre><code> [class.class_one] = &quot;step === 'step1'&quot;

 [ngClass]=&quot;{'class_one': step === 'step1'}&quot;
</code></pre>
For multiple options:
<pre><code> [ngClass]=&quot;{'class_one': step === 'step1', 'class_two' : step === 'step2' }&quot; 

 [ngClass]=&quot;{1 : 'class_one', 2 : 'class_two', 3 : 'class_three'}[step]&quot;

 [ngClass]=&quot;step == 'step1' ? 'class_one' : 'class_two'&quot;
</code></pre>

What is wrong with my Angular code? I am getting the following error:
<blockquote>
Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass
</blockquote>
<pre class="lang-html prettyprint-override"><code>&lt;ol&gt;
 &lt;li *ngClass=&quot;{active: step==='step1'}&quot; (click)=&quot;step='step1'&quot;&gt;Step1&lt;/li&gt;
 &lt;li *ngClass=&quot;{active: step==='step2'}&quot; (click)=&quot;step='step2'&quot;&gt;Step2&lt;/li&gt;
 &lt;li *ngClass=&quot;{active: step==='step3'}&quot; (click)=&quot;step='step3'&quot;&gt;Step3&lt;/li&gt;
&lt;/ol&gt;
</code></pre>

Angular: conditional class with *ngClass

我的Angular代码出了什么问题？我收到以下错误：无法读取BrowserDomAdapter.removeClass处未定义的属性“”remove“”<ol> <li *ngClass="{active: step==='step1'}" (click)="step='step1'">Step1</li> <li *ngClass="{active: step==='step2'}" (cl

问Angular:带有*ngClass的条件类
EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular:带有*ngClass的条件类EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular:带有*ngClass的条件类
EN