javascript - Angular：带* ngClass的条件类(Angular: conditional class with *ngClass)

Question

What is wrong with my Angular code?

(我的Angular代码有什么问题？)

I am getting:

(我正进入（状态：)

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

HTML

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

  ask by daniel translate from so

Answer 1

Angular 2,..,7 provides several ways to add classes conditionally:

(Angular 2，..，7提供了几种有条件地添加类的方法：)

type one

(第一类)

[class.my-class]="step=='step1'"

type two

(第二类)

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

and multiple option:

(和多个选项：)

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

type three

(第三类)

[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"

type four

(四类)

[ngClass]="(step=='step1')?'my-class1':'my-class2'"