web-dev-qa-db-ja.com

Angular 2条件に応じてクラスを変更

ビューに3つのボタンがあり、ページの読み込み時に最初のボタンのコンテンツを表示しています。ボタンがクリックされると、ボタンはアクティブになりますが、ページの読み込み時に初期ボタンはアクティブに設定されません。アクティブな最初のボタンを表示するために、これをdivに追加しました。

[ngClass]="'active'"

これの問題は、別のボタンがクリックされたときに最初のボタンがアクティブなクラスを保持するようになることです。文字列に基づいて表示されるデータを評価しています。各ボタンをクリックすると、文字列が変わります。

現在の文字列をチェックする条件を追加するにはどうすればよいですか？文字列が表示されている現在のデータと一致する場合、アクティブなクラスをこのボタンに追加しますか？

だからこのようなものは私が探しているものです：

[ngClass]="'active'" if "myString == ThisIsActiveString;

これは現在のボタンですが、この構文でクラスを追加してもクラスは追加されません。

 <button  [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

明確にするために、ページのロード時に文字列はデフォルトで「EQUIFAX」に設定されます。

これは答えに基づいています：

 <button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>
javascriptangulartypescriptangular2-templateangular2-directives
14
wuno

NgClassディレクティブ自体の条件に基づいてcssクラスを追加できます。

[ngClass]="{ 'active': myString == ThisIsActiveString }";

NgClassディレクティブの詳細を読んで、例 ここ を見つけてください。

17
Stefan Svrkota

[class.active]="shown == EQUIFAX"の等価ステートメントは、EQUIFAXという名前の変数と比較されています。

代わりに、文字列[class.active]="shown == 'EQUIFAX'"と比較するために同値を変更する必要があります

[ngClass]を使用すると、[ngClass]="{'active': shown == 'EQUIFAX'}が得られます

これを実装した遊び場を次に示します。 http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

3
silentsod

出来るよ：

[class.nameForYourClss]="myString == ThisIsActiveString ";
2
yanai edri

たとえば、多くのクラスを追加し、2つ以上の条件がある場合は、,カンマの後に各クラスと条件を追加できます。

例えば

[ngClass]="{'first-class': condition,
            'second-class': !condition}"
1
Druta Ruslan

HTMLで：

<div [style.color]="navColor"></div>

TSで：

宣言：

navColor: "white";

条件に基づいて変更：

this.navColor = "black";
0
Divyesh Govardhanan