Winkel: Bedingte Klasse mit * ngClass

562

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

Antworten:

1227

Angular Version 2, ..., 9 bietet verschiedene Möglichkeiten, Klassen bedingt hinzuzufügen:

Typ eins

[class.my-class]="step === 'step1'"

Typ zwei

[ngClass]="{'my-class': step === 'step1'}"

und mehrere Optionen:

[ngClass]="{'my-class': step === 'step1', 'my-class2':step === 'step2' }"

Typ drei

[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"

Typ vier

[ngClass]="(step=='step1')?'my-class1':'my-class2'"
MostafaMashayekhi
quelle
7
Perfekte Antwort, korrigieren Sie einfach den Typ 2 auf: [ngClass] = "{'my-class': step == 'step1'}" Mit dem '' int im Klassennamen
Adriano Galesso Alves
2
Für Typ drei ist die Reihenfolge des Klassennamens und der Prüfung falsch. Es sollte zuerst der Klassenname sein, z. B. [ngClass] = "{'my-class1': 1, 'my-class2': 2}"
obaylis
1
sieht aus wie "Typ drei" und "Typ vier" sind spezifische Verwendungen von [ngClass]="js expression returning html class string", die in diesem Sinne gleich sind
YakovL
1
Danke Mann .. du bist großartig
Pranav MS
1
Perfekte Antwort Kumpel. Vielen Dank !
Anjana Silva
422

[ngClass]=...statt *ngClass.

* ist nur für die Kurzsyntax für strukturelle Direktiven, wo Sie zum Beispiel verwenden können

<div *ngFor="let item of items">{{item}}</div>

anstelle der längeren äquivalenten Version

<template ngFor let-item [ngForOf]="items">
  <div>{{item}}</div>
</template>

Siehe auch https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Siehe auch https://angular.io/docs/ts/latest/guide/template-syntax.html

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>
<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>
Günter Zöchbauer
quelle
1
Aus der Angular-Dokumentation: "Das Sternchen ist" syntaktischer Zucker "für etwas Komplizierteres. Intern übersetzt Angular das Attribut * ngIf in ein <ng-template> -Element, das wie folgt um das Host-Element gewickelt ist. Die Direktive * ngIf wurde in das <ng-template> -Element verschoben, wo es zu einer Eigenschaftsbindung wurde, [ngIf]. Der Rest des <div>, einschließlich seines Klassenattributs, wurde in das <ng-template> -Element verschoben. " - Weitere Informationen @ angle.io/guide/structural-directives#the-asterisk--prefix
Kombinieren Sie
Eigentlich ist es nichts komplizierteres, *erlaubt nur eine vereinfachte Synax statt kanonischer Form.
Günter Zöchbauer
75

Eine andere Lösung wäre die Verwendung [class.active].

Beispiel:

<ol class="breadcrumb">
    <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>
Joel Almeida
quelle
8
Ich denke, dies sollte die akzeptierte Antwort sein, da dies die Angular2-Methode ist, um die HTML-Klasse festzulegen (von der ich nichts wusste und die Google mich hierher gebracht hat).
Kub1x
62

Das ist die normale Struktur für ngClass:

[ngClass]="{'classname' : condition}"

Verwenden Sie es in Ihrem Fall einfach so ...

<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>
Alireza
quelle
48

Mit den folgenden Beispielen können Sie 'IF ELSE' verwenden.

<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">
Chaitanya Nekkalapudi
quelle
1
Ich habe die erste und die zweite Lösung ausprobiert. Nur die zweite funktionierte für mich
user1238784
36

Sie können ngClass verwenden, um den Klassennamen sowohl bedingt als auch nicht in Angular anzuwenden

Zum Beispiel

[ngClass]="'someClass'">

Bedingt

[ngClass]="{'someClass': property1.isValid}">

Mehrfachbedingung

 [ngClass]="{'someClass': property1.isValid && property2.isValid}">

Methodenausdruck

[ngClass]="getSomeClass()"

Diese Methode wird innerhalb Ihrer Komponente

 getSomeClass(){
        const isValid=this.property1 && this.property2;
        return {someClass1:isValid , someClass2:isValid};
    }
Code-EZ
quelle
14

Sie sollten so etwas ( [ngClass]anstelle von *ngClass) verwenden:

<ol class="breadcrumb">
  <li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
  (...)

Thierry Templier
quelle
10

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.

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
Rohit.007
quelle
7

Um MostafaMashayekhi seine Antwort für Option 2 zu erweitern, können Sie auch mehrere Optionen mit einem ',' verketten

[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"

Außerdem kann * ngIf in einigen dieser Situationen verwendet werden, normalerweise kombiniert mit einem * ngFor

class="mats p" *ngIf="mat=='painted'"
Robert Leeuwerink
quelle
6

Während ich ein reaktives Formular erstellte, musste ich der Schaltfläche zwei Klassentypen zuweisen. So habe ich es gemacht:

<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''" 
[disabled]="!formGroup.valid">Sign in</button>

Wenn das Formular gültig ist, hat die Schaltfläche die BTN- und BTN-Klasse (vom Bootstrap), andernfalls nur die BTN-Klasse.

Sarvar Nishonboev
quelle
5

Zusätzlich können Sie mit Methodenfunktion hinzufügen:

In HTML

<div [ngClass]="setClasses()">...</div>

In component.ts

// Set Dynamic Classes
  setClasses() {
    let classes = {
      constantClass: true,
      'conditional-class': this.item.id === 1
    }

    return classes;
  }
Alper BULUT
quelle
4

Lassen Sie YourCondition Ihre Bedingung oder eine boolesche Eigenschaft sein, dann machen Sie es so

[class.yourClass]="YourCondition"
Abdus Salam Azad
quelle
4

ngClass Syntax:

[ngClass]="{'classname' : conditionFlag}"

Sie können wie folgt verwenden:

<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>
Chirag
quelle
4

Das hat bei mir funktioniert:

[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"
Ninad Kulkarni
quelle
4

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!

Waleed Shahzaib
quelle
1

Nicht relevant mit [ngClass]Direktive, aber ich bekam auch den gleichen Fehler wie

Die Eigenschaft 'remove' von undefined at ... kann nicht gelesen werden.

und 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

element: {type: string};

und in meinem habe [ngClass]ich benutzt

[ngClass]="{'active', element.type === 'active'}"

und ich bekam den Fehler

Die Eigenschaft 'type' von undefined at ... kann nicht gelesen werden.

und die Lösung bestand darin, mein Eigentum zu reparieren

element: {type: string} = {type: 'active'};

Hoffe, es hilft jemandem, der versucht, einen Zustand einer Immobilie in zu entsprechen [ngClass]

Hamza Khanzada
quelle
1

<div class="collapse in " [ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''" id="collapseExampleOrganization" aria-expanded="true" style="">
 <ul> 	 <li class="nav-item" [ngClass]="{'active': active_tab=='manage'}">
<a routerLink="/main/organization/manage" (click)="activemenu('manage')"> <i class="la la-building-o"></i>
<p>Manage</p></a></li> 
<li class="nav-item" [ngClass]="{'active': active_tab=='assignservice'}"><a routerLink="/main/organization/assignservice" (click)="activemenu('assignservice')"><i class="la la-user"></i><p>Add organization</p></a></li>
</ul></div>

Code ist ein gutes Beispiel für ngClass, wenn sonst Bedingung.

[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"

[ngClass]="{'active': active_tab=='assignservice'}"
Amarbhanu
quelle
0

Versuchen Sie wie folgt ..

Definieren Sie Ihre Klasse mit ''

<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>
Aishwarya Kathavarayan
quelle