ngFor角度2でクリックしたアイテムのbgcolorを変更します。

Question

私がクリックしたボタンの背景色を変更したいのですが、私のコードですが、期待通りに動作していません。行ボタン。どんな助け？

errorStepMenuOpen() { 
    this.errorStepMenu = true; 
    this.btnColor = "#ff7300"; 
} 

Answer 1

クイック回避策ではなく、単一のbtnColorを有するのである2スクリプト

<tr *ngFor="let stageitem of stageListData"> 
     <td>{{stageitem.srcScriptInstanceName}}</td> 
     <td>{{stageitem.startTime}}</td> 
     <td>{{stageitem.endTime}}</td> 
     <td>Manual</td> 
     <td>{{stageitem.state}}</td> 
     <td><button class="erroDisplayBtn" [ngStyle]="{'background-color':btnColor}" (click)="errorStepMenuOpen($event, stageitem)">{{stageitem.error}}</button></td> 
</tr> 

角度、あなたはbtnColors配列を持つことができます。

stageListDataが入力されている場合は、stageListDataをループして、各stageItemに対してデフォルトの色をbtnColorsにプッシュできます。なぜなら、あなたの変数 `これにより、

errorStepMenuOpen(event, stageItem, index) { 
    this.errorStepMenu = true; 
    this.btnColors[index] = "#ff7300"; 
}