変数駆動型クラスをngClassを使用する他のクラスとともに要素に追加しようとしています。角2 ngClass - クラス変数で複数のクラスを適用する
例：
// inputExtraClass = 'form-control-sm'
// Working
<input class='form-control' [ngClass]="inputExtraClass" placeholder="Working">
// Not working
<input class='form-control' [ngClass]="{inputExtraClass: true}" placeholder="Not working">
あなたはngClass内の式を使用することができます。
<input class='form-control' [ngClass]="(addClassIfTrue) ? 'inputExtraClass' : ''" placeholder="Working">Alejandroと似たような応答で、inputExtraClassはクラスの実際の名前ではなく、コンポーネントの変数です。したがって、一重引用符で囲むと実際のクラスは適用されません –
その文字列はユーザーによって提供されます（指定されていなければ空の文字列）。それをnullに設定することはできません。また、これを[ngClass] = "inputExtraClass"とすると、ngClassで複数のクラスを設定することはできません。 –
は、あなたの質問に完全な答えのようなものを提供し、
の操作を行います。<input class='form-control' [ngClass]="{'inputExtraClass': true}" placeholder="Not working">
、あなたがまた
<input class='form-control' [ngClass]="{'inputExtraClass': true, 'notInputExtraClass': !true }" placeholder="Not working">
のようなもの上記のこの方法を行うことができますクラス間の複数のクラスまたはスイッチをしたい場合は、それが一つのクラスや他の
のいずれかになりますはまた、あなたがこれを使って好きな他のバリエーションをaply、またはこのいずれかのようなコンポーネントにプロパティを行うことができます。
toggleClass: boolean = true;
とあなたのhtmlで：
<input class='form-control' [ngClass]="{ 'inputExtraClass': toggleClass, 'notInputExtraClass': !toggleClass }" placeholder="Not working">
同じ考え、その後、あなたはメソッドを作成し、toggleClassプロパティを変更したり、それはあなたがコンポーネントレベルのスタイルクラスを使用するか、または追加する必要があります
inputExtraClassはコンポーネント内の変数です（inputExtraClass = 'form-control-sm'）。私が 'inputExtraClass'を実行した場合：true、それはinputExtraClassが実際のクラス名であることを意味します。 –
[ngClass] = "{dropdown：！shouldDisplayDropdown}"という私のアプリケーションの1つでも同様に動作します。以下のようなコンポーネントで定義されています：dropdow：string = "dropdown";あなたのplunkr ATMで遊ぶことができないことを申し訳なく思っていますが、今接続が悪いです –
[Plunker]（https://plnkr.co/edit/NGmgkk5UWkg1lEJ1DzYA?p=preview）を更新できますか？ –
を助け願っています:)何ができセレクタがクラスの前に適用されていることを確認します。 [** answer **]（https://plnkr.co/edit/bMzEZnaeukMPeJXAxXze?p=preview） – Aravind
inputExtraClass変数に格納されているクラスは、カスタムクラスではなく、ブートストラップクラスです。 –