我的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>
当前回答
扩展MostafaMashayekhi对选项二的答案> 你也可以用一个'，'连接多个选项
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
此外，*ngIf也可以在某些情况下使用，通常与*ngFor结合使用
class="mats p" *ngIf="mat=='painted'"
其他回答
<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] =…而不是*ngClass。
*仅用于结构型指令的简写语法，例如可以使用
<div *ngFor="let item of items">{{item}}</div>
而不是较长的同等版本
<template ngFor let-item [ngForOf]="items">
<div>{{item}}</div>
</template>
参见https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
<some-element [ngClass]="'first second'"> <某个元素[ngClass] = "(“第一次”,“二”)" >…< /某个元素> <某个元素[ngClass] = "{“第一”:真的,“二”:真的,“第三”:假}" >…< /某个元素> <某个元素[ngClass] = " stringExp | arrayExp | objExp " >…< /某个元素> <some-element [ngClass]="{'class1 class2 class3': true}">
参见https://angular.io/docs/ts/latest/guide/template-syntax.html
<！——用属性>开启/关闭“特殊”类 < div[类。</div> . special]="isSpecial">类绑定是特殊的 <！——绑定到class。Special '胜过类属性——> < div class = "特殊的“ [class.special] = " !isSpecial">这个没有那么特别</div>
<！——用绑定重置/覆盖所有类名——> .使用实例 <div class="bad curly special" (类)= " badCurly " >坏花< / 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'}"
你应该像这样使用一些东西([ngClass]而不是*ngClass):
<ol class="breadcrumb">
<li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
(...)
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>
