角2 ngClassの値に変数を使用するには

Question

クラスリストに追加されるngClassの値に変数を使用します。私の使用例は、私は画像スプライトのコレクションを持っているということです。ベーススプライトがあり、ベーススプライトと同じファイル名を持ち、最後に ' - アクティブ'が追加されたアクティブ状態があります。私は、要素に目的のスプライトファイル名に一致するクラスを与えることによって、ドキュメントにスプライトを追加します。ユーザーが要素の上を移動するとき、2つのスプライトの間を行き来する必要があります。それ、どうやったら出来るの？

このような例を何かのため

（注：tool.name ===スプライトのファイル名を表示する）：あなたは.tool-name.active として、あなたのクラスを持つことができ、クラス.tool-name-active を持つの代わりに

<li *ngFor='let tool of tools' (mouseenter)='tool.isActive = true' (mouseleave)='tool.isActive = false'> 
    <span [ngClass]='{ {{tool.name}}-active: tool.isActive, {{tool.name}}: !tool.isActive }'>{{tool.name}}</span> 
</li> 

Answer 1

そして、あなたは多分意志が役立ちますngClassの配列を返す関数を使用して、次の

<li *ngFor='let tool of tools'> 
    <span class="{{tool.name}}" [ngClass]='{active: isActive}'>{{tool.name}}</span> 
</li> 

Answer 2

を行うことができます。

<li *ngFor='let tool of tools'><span [ngClass]='chkClass(tool)'>{{tool.name}}</span></li> 


public chkClass(item:any){ 
    let newClass = {}; 
    newClass[item.name+ '-active'] = true; 
    newClass[item.name] = false; 
    return newClass; 
}