Angular : classe conditionnelle avec *ngClass

Quel est le problème avec mon code Angular ? J'obtiens :

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>
MostafaMashayekhi
Question modifiée 13 novembre 2018 в 7:37
Programmation
javascript css angular angular-template angular-ng-class
8 février 2016 в 12:00
19 vues

[ngClass]=... au lieu de *ngClass.

* est seulement pour la syntaxe raccourcie pour les directives structurelles où vous pouvez par exemple utiliser

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

au lieu de la version équivalente plus longue


  <div>{{item}}</div>

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

>     ...
>     ...
>     ...
>     ...
>     ...

Voir aussi https://angular.io/docs/ts/latest/guide/template-syntax.html

>     
>     <div [class.special]="isSpecial">The class binding is special</div>
>     
>     
>     <div class="special"
>          [class.special]="!isSpecial">This one is not so special</div>



> 
>     
>     <div class="bad curly special"
>          [class]="badCurly">Bad curly</div>
Günter Zöchbauer
Réponse modifiée 28 mars 2017 в 7:51
Commentaires (2)

Une autre solution serait d'utiliser [class.active].

Exemple :

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

Vous devriez utiliser quelque chose comme ça ([ngClass] au lieu de *ngClass) :

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