各項目のボタンをクリックして、色を緑に変更してください

Question

私は質問のリストを持っていますが、質問ごとに回答A、B、または何も選択できません。これまでのところ、ボタンをクリックすると、色が緑色に変わります。私は各質問項目に対してこれを実装したいと思います。これどうやってするの？今

<ion-item class="text" *ngFor="let item of items | async> 
    <button> (click)="itemClicked(item.AnswerA)" [class.active]="selectedItem == item.AnswerA">Answer A</button> 
    <button> (click)="itemClicked(item.AnswerA)" [class.active]="selectedItem == item.AnswerB">Answer B</button> 
</ion-item> 

itemClicked(item) { 
    this.selectedItem = item; 
} 

.active { 
     background-color: green; 
    } 

Answer 1

あなたAnswer AとAnswer Bボタン：

会議アプリはモードを使用してここに例があります。あなたは、あなたの質問のそれぞれにselectedItemを追加し、以下の変更を行うことができます。

<ion-item class="text" *ngFor="let item of items | async> 
    <button> (click)="itemClicked(item, item.AnswerA)" [class.active]="item.selectedItem == item.AnswerA">Answer A</button> 
    <button> (click)="itemClicked(item, item.AnswerA)" [class.active]="item.selectedItem == item.AnswerB">Answer B</button> 
</ion-item> 

機能をitemClicked：

itemClicked(item, answer) { 
    // keep selectedItem for each item 
    item.selectedItem = answer; 
} 

Answer 2

それを行う方法は次のとおりです。

<button [attr.newColor]="addAttribute ? '' : null">Test</button> 

のでaddAttributeがtrueと評価された場合、それはnewcolorは属性を追加し、それが偽と評価された場合、それは時に属性を追加しませんすべて。一つだけselectedItemに基づいていますclass.active Changing button color or icon dynamically