我的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>
当前回答
你可以使用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};
}
其他回答
像这样试试。
用“
<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>
如果用户想显示基于&&和||的类 下面是我的工作
[ngClass]="{'clasname_1': condition_1 && condition_2, 'classname_2': condition_1 && condition2, 'classname_3': condition}"
例子:
[ngClass]="{'approval-panel-mat-drawer-side-left': similar_toil_mode==='side' && showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-side-right': similar_toil_mode==='side' && !showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-over': similar_toil_mode==='over'}"
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>
另一个解决方案是使用[class.active]。
例子:
<ol class="breadcrumb">
<li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>
对于elseif语句(较少比较)，使用如下语句:(例如，比较三个语句)
<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>
