角度：带* ngClass条件类角度：带* ngClass条件类(Angular: conditio

什么是错我的角码？ 我正进入（状态：

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

HTML

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

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

Answer 2:

角2，...，7提供了几种有条件地添加类：

键入一个

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

Answer 3:

另一解决方案是使用[class.active]

例如：

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

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']">

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:

虽然我创建的反应性形式，我不得不分配2种类的按钮。 这是我做的：

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

当表单是有效的，按钮有BTN和BTN级（从引导），否则只是BTN类。

Answer 9:

延长MostafaMashayekhi他的答案方案二>，你也可以连接多个选项用“”

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

也* ngIf可以在某些这些情况通常与一个*组合使用ngFor

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

Answer 10:

这是为我工作[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

Answer 11:

在Angular 7.X

CSS类被更新如下，这取决于表达评估的类型：

串 - 串（空间分隔）中列出的CSS类添加，阵列 - 声明为数组元素的CSS类添加，对象 - 键是当值给出的表达式的计算结果为truthy值获取添加CSS类，否则他们将被删除。

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

让，YourCondition是你的条件或布尔属性，然后做这样的

[class.yourClass]="YourCondition"

文章来源: Angular: conditional class with *ngClass