각 항목에 대한 버튼을 클릭하여 녹색으로 변경하십시오.

Question

나는 질문 목록을 가지고 있습니다. 질문마다 대답 A, B 또는 아무것도 선택할 수 없습니다. 지금까지 내가 한 것은 버튼을 클릭했을 때 녹색으로 변하는 것입니다. 각 질문 항목에 대해이 기능을 구현하고 싶습니다. 어떻게해야합니까? addAttribute이 true로 평가되면

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

그래서이 newColor 속성을 추가 할 것이고, FALSE 경우는에 속성을 추가하지 않습니다 :

<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를 추가 할 수 있습니다

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

:

<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

Answer 2

오른쪽 지금 할 수있는 방법입니다 모든. 하나의 selectedItem 기반으로 class.active Changing button color or icon dynamically