Angular：带有* ngClass的条件类

我的Angular代码有什么问题？ 我得到： Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ...

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

Answer 1

[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'">...</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> 

另请参阅https://angular.io/docs/ts/latest/guide/template-syntax.html

 <!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial">The class binding is special</div> <!-- binding to `class.special` trumps the class attribute --> <div class="special" [class.special]="!isSpecial">This one is not so special</div> 

 <!-- reset/override all class names with a binding --> <div class="bad curly special" [class]="badCurly">Bad curly</div> 

Answer 2

Angular 2提供了一些添加条件的方法

有不同的types：

input一个

 [class.my-class]="step=='step1'" 

键入二

 [ngClass]="{'my-class': step=='step1'}" 

键入三

 [ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]" 

types四

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

Answer 3

另一个解决scheme是使用[class.active] 。

例如：

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

Answer 4

这是正常的结构：

[ngClass] =“{'classname'：condition}”

所以在你的情况下，就像这样使用它：

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

Answer 5

你应该使用下面的东西（ [ngClass]而不是*ngClass ）：

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

Answer 6

您可以使用ngClass来有条件地应用类名，而不是在Angular中

例如

 [ngClass]="'someClass'"> 

条件

 [ngClass]="{'someClass': property1.isValid"> 

多个条件

  [ngClass]="{'someClass': property1.isValid && property2.isValid}"> 

你也可以作为一个expression式来执行一个方法

 [ngClass]="getSomeClass()" 

这个方法会在你的组件里面

  getSomeClass(){ const isValid=this.property1 && this.property2; return {someClass1:isValid , someClass2:isValid}; } 

Answer 7

当我创build一个被动表单时，我必须在button上分配两种types的类。 这是我做到的：

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

当表单有效时，button有btn和btn-class（来自bootstrap），否则就是btn类。