知道点击了哪个按钮的方法 - 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 func onclick 所选择的选项，但它的作用是，如果用户选择了错误的选项，它会将所有 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

您可以使用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(answer: string, button: HTMLButtonElement) {
    // Do logic here
    button.style.backgroundColor = desiredColor; // example: "#f00"
}

Answer 2

您可以使用自己的 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>

Answer 3

您必须将 $event 作为另一个参数传递并从该对象获取 id

检查这个解决方案

Angular2 get clicked element id