Способ узнать, какая кнопка была нажата - Angular 5

Question

Я занимаюсь разработкой приложения для викторины с 4 вариантами ответа на заданный вопрос. Я уже написал функцию, чтобы проверить, является ли выбранный вариант правильным ответом или неправильным. У меня возникают проблемы с определением того, какой параметр был выбран пользователем, и я хочу стилизовать его с помощью CSS как - Если выбран неправильный параметр, выбранный вариант параметр станет красным, а правильный - зеленым, и наоборот.

HTML:

<div *ngFor="let actiVar of activeArray ;let j = index" >

        {{actiVar.QuestionID}}.{{actiVar.Question}}
        <br>
        <br>
        <button type="button"  name="s" id="one" (click)="filterAnswer(actiVar.OP[j+0]) ; getColor(actiVar.OP[j+0])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+0]}}</button>
        <br>
        <br>
        <button type="button"  name="s" id="two" (click)="filterAnswer(actiVar.OP[j+1]) ; getColor(actiVar.OP[j+1])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+1]}}</button>        <br>
        <br>
        <button type="button"  name="s" id="three" (click)="filterAnswer(actiVar.OP[j+2]) ; getColor(actiVar.OP[j+2])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+2]}}</button>        <br>
        <br>
        <button type="button"  name="s" id="four" (click)="filterAnswer(actiVar.OP[j+3]) ; getColor(actiVar.OP[j+3])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+3]}}</button>
        <br>
      </div>

Я установил getColor функцию щелчка мышью по выбранному параметру, но что он делает, если пользователь выбрал неправильный параметр, он переводит все 4 параметра в красный и наоборот. выбранный вариант красного цвета.

getColor(j: any) { 
    if (j == this.activeArray[0].isRight) {

      this.buttonColor = 'green';
    }
    else {
      this.buttonColor = 'red';
    }
  }

this.activeArray[0].isRight - правильный ответ, полученный из JSON. Я понимаю, что мне придется использовать отдельный тег id на кнопке, чтобы узнать, какая опция была нажата, но мне не повезло найти правильную логику для stackoverflow.

Answer 1

Вы должны передать $ event в качестве другого аргумента и получить идентификатор от этого объекта

проверить это решение

Angular2 получить идентификатор элемента по клику

Answer 2

Вы можете использовать Template reference variables -> https://angular.io/guide/template-syntax#ref-vars

<button #buttonRef1 type="button" (click)="filterAnswer(actiVar.OP[j+0], buttonRef1)" [disabled]="permissionoptions">{{actiVar.OP[j+0]}}</button>
<button #buttonRef2 type="button" (click)="filterAnswer(actiVar.OP[j+1], buttonRef2)" [disabled]="permissionoptions">{{actiVar.OP[j+1]}}</button>
<button #buttonRef3 type="button" (click)="filterAnswer(actiVar.OP[j+2], buttonRef3)" [disabled]="permissionoptions">{{actiVar.OP[j+2]}}</button>
<button #buttonRef4 type="button" (click)="filterAnswer(actiVar.OP[j+3], buttonRef4)" [disabled]="permissionoptions">{{actiVar.OP[j+3]}}</button>

filterAnswer:

filterAnswer(answer: string, button: HTMLButtonElement) {
    // Do logic here
    button.style.backgroundColor = desiredColor; // example: "#f00"
}

Answer 3

Вы можете использовать собственный метод filterAnswer для передачи имени кнопки. Этот подход - более простой способ сделать это.

 <button type="button"  name="s" id="one" (click)="filterAnswer(actiVar.OP[j+0], 'one') ; getColor(actiVar.OP[j+0])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+0]}}</button>