角度2変更クラスオン条件

Question

ビューに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"にデフォルト設定されていることを確認してください。

これは、回答に基づいている：あなたはもっとに関するNgClassディレクティブを読み、例hereを見つけることができます

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

：

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

Answer 1

あなたはNgClassディレクティブ自体に条件に基づいてCSSクラスを追加することができます。

Answer 2

[class.active]="shown == EQUIFAX"という同等のステートメントは、EQUIFAXという変数と比較しています。あなたは、代わりに、[ngClass]あなた[ngClass]="{'active': shown == 'EQUIFAX'}

になるだろう使用して文字列に[class.active]="shown == 'EQUIFAX'"

を比較するために、等価を変更する必要があります

はここで実装され、これと遊び場です：http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

Answer 3

あなたがそれを行うことができます：

[class.nameForYourClss]="myString == ThisIsActiveString ";