* ngForの背景色を設定してください

Question

タイトルが私の質問の正義を行うかどうかはわかりませんが、ここではわかりません。

私は動的な値のためにループしていた角度material2からmd-toolbarを持っています。今、私は[ngClass]することにより、特定のクリックのツールバーの背景色を設定したい

<md-toolbar (click)="selectedToolbarValue(key.Name)" *ngFor="let key of arrayOfKeys; let i=index"> 
     <span>{{key.Name}}</span> 
</md-toolbar> 

。

<md-toolbar [ngClass]="{'toolBarColor':setToolbarStyle}" (click)="selectedToolbarValue(key.Name)" *ngFor="let key of arrayOfKeys; let i=index"> 
     <span>{{key.Name}}</span> 
</md-toolbar> 

.tsで：

setToolbarStyle:boolean=false; 
selectedToolbarValue(value){ 
    this.setToolbarStyle = true; 
    //other code 
} 

.scssで：今すぐ

.toolBarColor{ 
background-color:blue; 
color:#fff; 
} 

上記のコードで起こっている、それはすべてのツールバー値をスタイリングされているものこれは私がやったことですループの一部です。クリックされているツールバーだけをスタイルするにはどうすればいいですか？

Answer 1

値の代わりにngClass式の関数を使用できます。この関数は、インデックスまたはその他の一意の識別子を取ることができます。

<md-toolbar [ngClass]="{'toolBarColor':setToolbarStyle(i)}" (click)="selectedToolbarValue(key.Name, i)" *ngFor="let key of arrayOfKeys; let i=index"> 

toolbarStyleIndex: number; 

setToolbarStyle(i) { 
    return i===toolbarStyleIndex; 
} 

selectedToolbarValue(value, i){ 
    this.toolbarStyleIndex = i; 
    //other code 
} 

Answer 2

あなたはarrayOfKeysのbooleanプロパティとしてsetToolbarStyleを追加することができます。そして、次の変更を行います。あなたの代わりにキー `のi``渡す `selectedToolbarValue（I）`メソッドを変更してい

setToolbarStyle(key:any) : boolean { 
    key.setToolbarStyle = true; 
    return key.setToolbarStyle; 
}