Угловой: условный класс с * ngClass

Question

Что не так с моим Угловым кодом? Я получаю: Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ...

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

Answer 1

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

Answer 2

Вы должны использовать что-то ([ngClass] вместо *ngClass) так:

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

Answer 3

Другое решение будет использовать [class.active].

Пример:

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

Answer 4

Угловое 2 обеспечивают некоторый способ добавить класс с условием

есть другой тип:

один тип

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

тип два

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

типа три

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

типа четыре

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

Answer 5

Это нормальное строение для ngClass:

[ngClass] =» { «Имя_класса»: состояние}»

Так что в вашем случае, просто использовать его как это:

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

Answer 6

Вы можете использовать ngClass применять имя класса как условно и не в угловых

Для примера

[ngClass]="'someClass'"> 

Условный

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

Multiple Состояние

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

выражение Метод

[ngClass]="getSomeClass()" 

Этот метод будет внутри компонента

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

Answer 7

В то время как я создавал реактивную форму, мне пришлось назначить 2 типа класса на кнопке. Это, как я это сделал:

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

Когда форма действует, кнопка BTN и БТН-класса (от начальной загрузки), в противном случае просто БТН класс.