我的Angular代码出了什么问题?我得到以下错误:

无法读取BrowserDomAdapter.removeClass中未定义的属性“remove”

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

当前回答

对于elseif语句(较少比较),使用如下语句:(例如,比较三个语句)

<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>

其他回答

此外,您可以添加与方法函数:

在HTML中

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

在component.ts

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

    return classes;
  }

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

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

你可以使用ngClass有条件地应用类名,也可以不在Angular中应用

例如

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

对于elseif语句(较少比较),使用如下语句:(例如,比较三个语句)

<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>

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>