Was ist mit meinem Angular-Code falsch? Ich bekomme:
Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ...
HTML
<ol class="breadcrumb">
<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>
Antworten:
Angular Version 2, ..., 9 bietet verschiedene Möglichkeiten, Klassen bedingt hinzuzufügen:
Typ eins
Typ zwei
und mehrere Optionen:
Typ drei
Typ vier
quelle
[ngClass]="js expression returning html class string"
, die in diesem Sinne gleich sind[ngClass]=...
statt*ngClass
.*
ist nur für die Kurzsyntax für strukturelle Direktiven, wo Sie zum Beispiel verwenden könnenanstelle der längeren äquivalenten Version
Siehe auch https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
Siehe auch https://angular.io/docs/ts/latest/guide/template-syntax.html
quelle
*
erlaubt nur eine vereinfachte Synax statt kanonischer Form.Eine andere Lösung wäre die Verwendung
[class.active]
.Beispiel:
quelle
Das ist die normale Struktur für
ngClass
:Verwenden Sie es in Ihrem Fall einfach so ...
quelle
Mit den folgenden Beispielen können Sie 'IF ELSE' verwenden.
quelle
Sie können ngClass verwenden, um den Klassennamen sowohl bedingt als auch nicht in Angular anzuwenden
Zum Beispiel
Bedingt
Mehrfachbedingung
Methodenausdruck
Diese Methode wird innerhalb Ihrer Komponente
quelle
Sie sollten so etwas (
[ngClass]
anstelle von*ngClass
) verwenden:quelle
Im
Angular 7.X
Die CSS-Klassen werden je nach Art der Ausdrucksbewertung wie folgt aktualisiert:
Zeichenfolge - Die in der Zeichenfolge aufgelisteten CSS-Klassen (durch Leerzeichen getrennt) werden hinzugefügt
Array - Die als Array-Elemente deklarierten CSS-Klassen werden hinzugefügt
Objektschlüssel sind CSS-Klassen, die hinzugefügt werden, wenn der im Wert angegebene Ausdruck einen wahrheitsgemäßen Wert ergibt, andernfalls werden sie entfernt.
quelle
Um MostafaMashayekhi seine Antwort für Option 2 zu erweitern, können Sie auch mehrere Optionen mit einem ',' verketten
Außerdem kann * ngIf in einigen dieser Situationen verwendet werden, normalerweise kombiniert mit einem * ngFor
quelle
Während ich ein reaktives Formular erstellte, musste ich der Schaltfläche zwei Klassentypen zuweisen. So habe ich es gemacht:
Wenn das Formular gültig ist, hat die Schaltfläche die BTN- und BTN-Klasse (vom Bootstrap), andernfalls nur die BTN-Klasse.
quelle
Zusätzlich können Sie mit Methodenfunktion hinzufügen:
In HTML
In component.ts
quelle
Lassen Sie YourCondition Ihre Bedingung oder eine boolesche Eigenschaft sein, dann machen Sie es so
quelle
ngClass
Syntax:Sie können wie folgt verwenden:
quelle
Das hat bei mir funktioniert:
quelle
Sie können [ngClass] oder [class.classname] verwenden, beide funktionieren gleich.
[class.my-class]="step==='step1'"
ODER
[ngClass]="{'my-class': step=='step1'}"
Beide werden gleich funktionieren!
quelle
Nicht relevant mit
[ngClass]
Direktive, aber ich bekam auch den gleichen Fehler wieund ich dachte, es sei der Fehler in meinem
[ngClass]
Zustand, aber es stellte sich heraus, dass die Eigenschaft, auf die ich im Zustand von zugreifen wollte,[ngClass]
nicht initialisiert wurde.Als hätte ich das in meiner Typoskriptdatei
und in meinem habe
[ngClass]
ich benutztund ich bekam den Fehler
und die Lösung bestand darin, mein Eigentum zu reparieren
Hoffe, es hilft jemandem, der versucht, einen Zustand einer Immobilie in zu entsprechen
[ngClass]
quelle
Code ist ein gutes Beispiel für ngClass, wenn sonst Bedingung.
quelle
Versuchen Sie wie folgt ..
Definieren Sie Ihre Klasse mit ''
quelle