Angular *ngClass-Fehler: Wie behebt man „Eigenschaft ‚remove' von undefiniert kann nicht gelesen werden'?

Angular: Bedingte Klasse mit *ngClass

Bedingte Klassenzuweisung mit *ngClass ist eine effektive Angular-Technik zum dynamischen Ändern des Elementstils basierend auf bestimmten Bedingungen. Wenn jedoch der Fehler „Eigenschaft ‚remove‘ von undefiniert bei BrowserDomAdapter.removeClass kann nicht gelesen werden“ auftritt, weist dies auf ein Problem mit dem Code hin. Lassen Sie uns mögliche Lösungen erkunden:

Lösung mit alternativer Klassensyntax

Angular bietet alternative Syntaxoptionen für die bedingte Klassenzuweisung:

• Typ Eins:

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

• Typ Zwei:

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

• Mehrfach Optionen:

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

• Enum-ähnliche Syntax:

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

• Ternär Operator:

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

Beispielcode mit Typ-1-Syntax:

<ol>
    <li [class.active] = "step==='step1'" (click)="step='step1'">Step1</li>
    <li [class.active] = "step==='step2'" (click)="step='step2'">Step2</li>
    <li [class.active] = "step==='step3'" (click)="step='step3'">Step3</li>
</ol>

Diese alternative Syntax entfernt das Potenzial „undefiniert“. "Fehler bei Verwendung der integrierten Klassenbindungen von Angular.

Eine umfassende Liste finden Sie in der offiziellen Dokumentation von Angular von Klassenbindungssyntaxoptionen.

Das obige ist der detaillierte Inhalt vonAngular *ngClass-Fehler: Wie behebt man „Eigenschaft ‚remove' von undefiniert kann nicht gelesen werden'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!