Wie verwende ich „ngClass' richtig für bedingtes Styling in Angular?

Bedingte Klasse mit *ngClass in Angular

Eine der häufigsten Anforderungen in Angular-Anwendungen besteht darin, Klassen basierend auf bestimmten Bedingungen bedingt anzuwenden. Die ngClass-Direktive bietet eine praktische Möglichkeit, dies zu erreichen.

Aufgetretenes Problem

Bei der Verwendung von ngClass auf eine bestimmte Weise kann ein Fehler wie „Eigenschaft 'remove' von undefiniert kann nicht gelesen werden“ auftreten. Dieser Fehler weist auf eine falsche Verwendung der Direktive hin.

Korrekte Verwendung von ngClass in Angular 2

Angular 2 und höher bietet mehrere Optionen für die Anwendung bedingter Klassen:

Option 1:

[class.my_class] = "step === 'step1'"

Diese Syntax Fügt die Klasse „my_class“ nur hinzu, wenn die Variable „step“ gleich „step1“ ist.

Option 2:

[ngClass] = "{'my_class': step === 'step1'}"

Diese Option verwendet ein Objektliteral zur Angabe die Bedingung und die entsprechende anzuwendende Klasse.

Option 3:

[ngClass] = "{'1' : 'my_class1', '2' : 'my_class2', '3' : 'my_class4'}[step]"

Diese Methode verwendet eine Hash-Suche, um die entsprechende Klasse basierend auf dem Wert der Variable „step“ anzuwenden.

Option 4:

[ngClass] = "step == 'step1' ? 'my_class1' : 'my_class2'"

Diese Syntax verwendet den ternären Operator, um die Klasse basierend auf dem „Schritt“ bedingt festzulegen. Variable.

Beispiel

In Ihrem Code haben Sie die Verwendung von ngClass={active: step==='step1'} angegeben, was nicht die korrekte Syntax ist. Nutzen Sie stattdessen eine der oben beschriebenen Möglichkeiten. Zum Beispiel:

<ol>
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

Die Übernahme eines dieser alternativen Ansätze sollte den aufgetretenen Fehler beheben. Weitere Einzelheiten finden Sie in der Angular-Dokumentation.

Das obige ist der detaillierte Inhalt vonWie verwende ich „ngClass' richtig für bedingtes Styling in Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!