javascript - Angular: *ngClass を使用した条件付きクラス

Question

Angular コードの何が問題になっていますか? 次のエラーが表示されます。

BrowserDomAdapter.removeClass で未定義のプロパティ 'remove' を読み取ることができません

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

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

別の解決策は、を使用すること[class.active]です。

例 ：

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

Answer 3

それはの通常の構造ngClassです：

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

したがって、あなたの場合、このように使用してください...

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

[ngClass] または [class.classname] を使用できますが、どちらも同じように機能します。
[class.my-class]="step==='step1'"

   また

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

どちらも同じように機能します。

Answer 5

リアクティブ フォームを作成しているときに、ボタンに 2 種類のクラスを割り当てる必要がありました。これが私がやった方法です：

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

フォームが有効な場合、ボタンには btn と btn-class (ブートストラップから) があり、それ以外の場合は btn クラスだけです。

Answer 6

次の構文を使用して、クラスを動的にすることができます。Angular 2 plus では、さまざまな方法でこれを行うことができます。

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

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

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

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

Answer 7

This is what worked for me:

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