web-dev-qa-db-ja.com

ngClassの複数のクラス

私は* ngClassに複数の値を追加しようとしていますが、これは以前のアルファリリースで動作していたもので、現在angular2ベータでは動作していないようです：

<i *ngClass="['fa','fa-star']"></i>

エラーが発生します。

例外：TypeError：PostView @ 30：27の[['fa'、 'fa-star']で未定義のプロパティ 'add'を読み取れません

ここに何が欠けていますか？

angularng-class
11
Sagi

プロパティのバインドを作成するには、角括弧を使用する必要があります。 this plunk を参照してください

<i [ngClass]="['fa','fa-star']"></i>
22
alexpods

これらのクラスを動的に変更しない場合、ngClassを使用するのはやり過ぎです。テンプレートでclass="fa fa-star"を使用するだけです。

ngClassは、これらを動的にオンまたはオフに切り替えるときに使用する必要があります。ドキュメントには例があります：

コンポーネントにはメソッドがあります：

setClasses() {
  return {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  }
}

次に、テンプレートでngClassを次のように使用します。

<div [ngClass]="setClasses()">This div is saveable and special</div>
6
Zyzle

複数のクラスを含む文字列を作成することもできます。

この場合、additionalClassはクラス名を含む@Input varであり、activeはアクティブなクラスを設定するブール値です

<div [ngClass]="(additionalClass + ' ' + (active ? 'active' : ''))"></div>
6
chriszichrisz