Warum löst „*ngClass' in Angular den Fehler „Eigenschaft „Entfernen' von undefiniert kann nicht gelesen werden' aus?

Bedingte Klasse mit *ngClass in Angular

Angular bietet verschiedene Optionen, um CSS-Klassen bedingt auf HTML-Elemente anzuwenden. Eine gängige Methode ist die Verwendung der *ngClass-Direktive. Bei unsachgemäßer Verwendung kann es jedoch zu Fehlern wie „Die Eigenschaft ‚remove‘ von undefiniert kann nicht gelesen werden“ führen.

Problem:

Angesichts des folgenden Angular-Codes: Warum kommt folgender Fehler? tritt auf:

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass

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

Lösung:

Der Fehler tritt aufgrund der Verwendung der ngClass-Direktive mit dem bedingten Ausdruck in Angular Version 2 auf . In Angular 2 verwendet die ngClass-Direktive ein Objekt als Argument, wobei die Schlüssel CSS-Klassennamen und die Werte boolesche Ausdrücke darstellen.

Um dieses Problem zu beheben, ersetzen Sie die *ngClass-Direktive durch eine der folgenden die folgenden von Angular bereitgestellten Methoden:

Typ Eins:

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

Typ Zwei:

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

Typ Drei:

[ngClass]="{1: 'active', 2: 'step2', 3: 'step3'}[step]"

Typ vier:

[ngClass]="step === 'step1' ? 'active' : 'inactive'"

Für mehrere Klassenbedingungen können Sie verwenden die Objektnotation, wie in Typ Zwei gezeigt. Weitere Informationen zur Verwendung von *ngClass.

finden Sie in der Angular-Dokumentation

Das obige ist der detaillierte Inhalt vonWarum löst „*ngClass' in Angular den Fehler „Eigenschaft „Entfernen' von undefiniert kann nicht gelesen werden' aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!