Angular 2のngClass内の動的クラス名

ngClass式の内部で値を補間する必要がありますが、それを機能させることができません。

私が理解できる唯一の解決策であるこれらの解決策を試しましたが、これらの2つは補間で失敗します。

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

これは補間で機能しますが、文字列全体がクラスとして追加されるため、動的に追加されたクラスでは失敗します。

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

だから私の質問は、ngClassこのように動的クラス名をどのように使用するのですか？

試す

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

代わりに。

または

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

あるいは

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

動作しますが、ngClassを使用することの追加の利点は、他のメソッド（例：ディレクティブまたは属性など）によって追加された他のクラスを上書きしないことです。[class.xyz]classclass

Angular 9アップデート

新しいコンパイラーのIvyは、同じ要素に異なるタイプのクラスバインディングがある場合に何が起こるかをより明確かつ予測可能にします。詳しくはこちらをご覧ください。

ngClassは3つのタイプの入力を受け取ります

• オブジェクト：各キーはCSSクラス名に対応します。動的キーを使用することはできません。key 'key' "key"すべて同じであり、[key]サポートされていないためです。
• 配列：クラスのリストのみを含めることができ、条件は含まれませんが、3項演算子は機能します
• 文字列/式：通常のクラス属性と同様

これはうまくいくはずです

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

しかし、Angularはこの構文をスローします。これはバグだと思います。https://stackoverflow.com/a/36024066/217408も参照してください

その他は無効です。との[]併用はできません{{}}。どちらか一方。{{}}オブジェクトをに渡す必要があるため、この場合は目的の結果にならない文字列化された結果をバインドしngClassます。

プランカーの例

回避策として、@ A_Singまたは

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

に使える。

これは、複数の条件を持つ複数のクラスに対して私がやっていることの例です。

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

ここで：
classesは、さまざまなクラス名の文字列を含むオブジェクトです。例えばclass.icon.large = "app__icon--large"

ダイナミックです！条件が更新されると更新されます。

クラスバインディングを実装する際に留意すべきいくつかの重要な点について触れておきます。

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }" 

1つの条件が満たされるため、ここのクラスは正しくバインドされませんが、2つの異なる条件を持つ可能性のある2つの同一のクラス「バッジ警告」があります。これを修正するには

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }" 

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

使用できます <i [className]="'fa fa-' + data?.icon"> </i>