我的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>
当前回答
在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>
其他回答
<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'}"
这对我来说很管用:
[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"
可以使用以下语法使类成为动态的。在Angular 2 plus中，你可以通过多种方式做到这一点:
[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"
[ngClass]="{'active': step}"
[ngClass]="step== 'step1'?'active':''"
[ngClass]="step? 'active' : ''"
对于elseif语句(较少比较)，使用如下语句:(例如，比较三个语句)
<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>
如果用户想显示基于&&和||的类 下面是我的工作
[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'}"
