hoekig: voorwaardelijke klasse met * ngclass

Wat is er mis met mijn hoekcode? Ik krijg de volgende foutmelding:

Kan eigenschap ‘verwijderen’ van undefined bij 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>

Antwoord 1, Autoriteit 100%

Angular Version 2+ biedt verschillende manieren om klassen voorwaardelijk toe te voegen:

type één

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

Type Two

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

en meerdere optie:

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

Type Three

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

type vier

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

Antwoord 2, Autoriteit 24%

[ngClass]=...in plaats van *ngClass.

*is alleen voor de SHORTHAND SYNTAX voor structurele richtlijnen waar u bijvoorbeeld

kunt gebruiken

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

in plaats van de langere equivalente versie

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

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

Zie ook https://angular.io/docs/ts/ nieuwste/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>

Antwoord 3, autoriteit 5%

Een andere oplossing is het gebruik van [class.active].

Voorbeeld:

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

Antwoord 4, autoriteit 4%

Dat is de normale structuur voor ngClassis:

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

Dus in jouw geval, gebruik het gewoon zo…

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

Antwoord 5, autoriteit 3%

met de volgende voorbeelden kunt u ‘IF ELSE’ gebruiken

<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">

Antwoord 6, autoriteit 2%

U kunt ngClass gebruiken om de klassenaam zowel voorwaardelijk als niet in Angular toe te passen

Bijvoorbeeld

[ngClass]="'someClass'">

Voorwaardelijk

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

Meerdere voorwaarden

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

Methode-expressie

[ngClass]="getSomeClass()"

Deze methode zal in uw component zitten

getSomeClass(){
        const isValid=this.property1 && this.property2;
        return {someClass1:isValid , someClass2:isValid};
    }

Antwoord 7

Je zou zoiets moeten gebruiken ([ngClass]in plaats van *ngClass) zoals:

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

Antwoord 8

In Angular 7.X

De CSS-klassen worden als volgt bijgewerkt, afhankelijk van het type expressie-evaluatie:

• string – de CSS-klassen die in de string staan (met spaties gescheiden) zijn toegevoegd

• Array – de CSS-klassen die zijn gedeclareerd als Array-elementen worden toegevoegd

• Object – sleutels zijn CSS-klassen die worden toegevoegd wanneer de uitdrukking in de waarde een waarheidswaarde oplevert, anders worden ze verwijderd.

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

Antwoord 9

om MostafaMashayekhi zijn antwoord voor optie twee uit te breiden>
je kunt ook meerdere opties koppelen met een ‘,’

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

Ook *ngIf kan in sommige van deze situaties worden gebruikt, meestal gecombineerd met een *ngFor

class="mats p" *ngIf="mat=='painted'"

Antwoord 10

Bovendien kunt u toevoegen met de methodefunctie:

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

Antwoord 11

Terwijl ik een reactief formulier aan het maken was, moest ik 2 soorten klassen op de knop toewijzen. Dit is hoe ik het deed:

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

Als het formulier geldig is, heeft de knop btn en btn-class (van bootstrap), anders alleen btn class.

Antwoord 12

U kunt [ngClass] of [class.classname] gebruiken, beide werken hetzelfde.
[class.my-class]="step==='step1'"

   OF

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

Beide werken hetzelfde!

Antwoord 13

Laat YourCondition uw toestand of een booleaanse eigenschap zijn, doe het dan als volgt

[class.yourClass]="YourCondition"

Antwoord 14

ngClasssyntaxis:

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

U kunt als volgt gebruiken:

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

Antwoord 15

Dit is wat voor mij werkte:

[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

Antwoord 16

We kunnen klassen dynamisch maken door de volgende syntaxis te gebruiken. In Angular 2 plus kun je dit op verschillende manieren doen:

[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"

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

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

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

Antwoord 17

Niet relevant voor de [ngClass]-richtlijn, maar ik kreeg ook dezelfde foutmelding als

Kan eigenschap ‘verwijderen’ van undefined niet lezen op…

en ik dacht dat dit de fout was in mijn [ngClass]voorwaarde, maar het bleek dat de eigenschap waartoe ik toegang probeerde te krijgen in de voorwaarde van [ngClass]niet was geïnitialiseerd.

Alsof ik dit in mijn typoscript-bestand had

element: {type: string};

en in mijn [ngClass]die ik gebruikte

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

en ik kreeg de foutmelding

Kan eigenschap ‘type’ van undefined niet lezen op…

en de oplossing was om mijn eigendom te repareren aan

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

Ik hoop dat het iemand helpt die probeert te voldoen aan een voorwaarde van een eigenschap in [ngClass]

Antwoord 18

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

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

<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>

   [class.class_one] = "step === 'step1'"
    [ngClass]="{'class_one': step === 'step1'}"

   [ngClass]="{'class_one': step === 'step1', 'class_two' : step === 'step2' }" 
    [ngClass]="{1 : 'class_one', 2 : 'class_two', 3 : 'class_three'}[step]"
    [ngClass]="step == 'step1' ? 'class_one' : 'class_two'"

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

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

[ngClass]="(step=='step1')?'class1':'class2'"