Angular 2 ngClass - Wenden Sie mehrere Klassen an, mit Klassenvariablen

Question

Ich versuche, Variable-gesteuerte Klasse (n) zu einem Element zusammen mit anderen Klassen mit ngClass hinzuzufügen.

Beispiel:

// 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"> 

Plunker

Answer 1

Sie Ausdrücke in ngClass verwenden können:

<input class='form-control' [ngClass]="(addClassIfTrue) ? 'inputExtraClass' : ''" placeholder="Working">

Answer 2

Providing eine Art vollständige Antwort auf Ihre Frage,

Do: <input class='form-control' [ngClass]="{'inputExtraClass': true}" placeholder="Not working">

und wenn Sie mehr als eine Klasse oder einen Schalter zwischen den Klassen möchten, können Sie auch wie etwas tun

<input class='form-control' [ngClass]="{'inputExtraClass': true, 'notInputExtraClass': !true }" placeholder="Not working"> 

diese Art und Weise oben, wird es entweder eine Klasse oder die andere

sein

Sie können auch jede andere Variation aply Sie dieses mögen, oder eine Eigenschaft in Ihrer Komponente wie diese machen:

toggleClass: boolean = true; 

und in Ihrem html:

<input class='form-control' [ngClass]="{ 'inputExtraClass': toggleClass, 'notInputExtraClass': !toggleClass }" placeholder="Not working"> 

gleiche Idee, und dann könnten Sie eine Methode erstellen und die toggleClass Eigenschaft ändern oder was auch immer :) es Sie Artklasse Komponentenebene half