在Angular 7中。X

根据表达式求值的类型，CSS类的更新如下:

string -添加字符串中列出的CSS类(空格分隔) Array—添加声明为Array元素的CSS类 对象键是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>

扩展MostafaMashayekhi对选项二的答案> 你也可以用一个'，'连接多个选项

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

此外，*ngIf也可以在某些情况下使用，通常与*ngFor结合使用

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

你应该像这样使用一些东西([ngClass]而不是*ngClass):

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

Angular version 2+提供了几种有条件地添加类的方法:

1型

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

您可以在文档页上找到这些示例

像这样试试。

用“

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

<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 if else条件的好例子。

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

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