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

当前回答

当我创建一个响应式表单时,我必须在按钮上分配2种类型的类。我是这样做的:

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

当表单有效时,button具有btn和btn-class (from bootstrap),否则只有btn类。

其他回答

如果用户想显示基于&&和||的类 下面是我的工作

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

可以使用以下语法使类成为动态的。在Angular 2 plus中,你可以通过多种方式做到这一点:

[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"
[ngClass]="{'active': step}"
[ngClass]="step== 'step1'?'active':''"
[ngClass]="step? 'active' : ''"

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

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

Angular提供了多种有条件地添加类的方法:

第一个方法

Active是您的类名

[class.active]="step === 'step1'"

第二种方式

Active是您的类名

[ngClass]="{'active': step=='step1'}"

第三条道路

通过使用三元运算符class1和class2是你的类名

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

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

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