Какво не е наред с моя Angular код? Получавам:
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>
[ngClass]=...
вместо *ngClass
.
*
е само за съкратения синтаксис за структурни директиви, където можете да използвате например
<div *ngFor="let item of items">{{item}}</div>
вместо по-дългата еквивалентна версия
<template ngFor let-item [ngForOf]="items">
<div>{{item}}</div>
</template>
Вижте също 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>
Виж също 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>
Друго решение би било използването на [class.active]
.
Пример :
<ol class="breadcrumb">
<li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>
Трябва да използвате нещо ([ngClass]
вместо *ngClass
) по този начин:
<ol class="breadcrumb">
<li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
(...)