当我创建一个响应式表单时，我必须在按钮上分配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让:

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

[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]而不是*ngClass):

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

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

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

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

该指令有三种不同的操作方式，这取决于表达式的计算结果是三种类型中的哪一种:

If the expression evaluates to a string, the string should be one or more space-delimited class names. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name. If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.

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

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

对于多个选项:

    [ngClass]="{'class_one': step === 'step1', 'class_two' : step === 'step2' }" 

    [ngClass]="{1 : 'class_one', 2 : 'class_two', 3 : 'class_three'}[step]"

    [ngClass]="step == 'step1' ? 'class_one' : 'class_two'"