Ionic4答题应用：点击错误选项时错误变红同时正确项变绿的实现

要实现你需要的功能，核心是在用户点击错误选项时，不仅标记当前按钮为红色，还要主动找到正确答案对应的按钮并将其设为绿色。下面是两种实用的修改方案，你可以根据场景选择：

方案一：批量管理所有选项按钮（适配多题/动态答案场景） #

这种方式适合后续题目数量较多、正确答案会动态变化的场景，能统一管理所有选项按钮，扩展性更强：

1. 更新模板（play-quiz.html）

给所有选项按钮添加统一的模板引用#answerButtons，方便在TS中批量获取按钮元素：

<ion-list> 
  <ion-row class="marginTop"> 
    <ion-col class="border ion-text-center"> 
      Grand Central Terminal, Park Avenue, New York is the world's 
    </ion-col> 
  </ion-row> 
  <ion-row class="marginTop"> 
    <ion-col class="ion-text-center"> 
      <ion-button id="1" #first #answerButtons class="btn" expand="block" (click)="onClick(first,'1')"> 
        Largest Railway Station 
      </ion-button> 
    </ion-col> 
  </ion-row> 
  <ion-row> 
    <ion-col class="ion-text-center"> 
      <ion-button id="2" #second #answerButtons class="btn" expand="block" (click)="onClick(second,'2')"> 
        highest railway station 
      </ion-button> 
    </ion-col> 
  </ion-row> 
  <ion-row> 
    <ion-col class="ion-text-center"> 
      <ion-button id="3" #third #answerButtons class="btn" expand="block" (click)="onClick(third,'3')"> 
        longest railway station 
      </ion-button> 
    </ion-col> 
  </ion-row> 
  <ion-row> 
    <ion-col class="ion-text-center"> 
      <ion-button id="4" #four #answerButtons class="btn" expand="block" (click)="onClick(four,'4')"> 
        None of the above 
      </ion-button> 
    </ion-col> 
  </ion-row> 
  <ion-row> 
    <ion-col> 
      <ion-button class="btn right" expand="small"> Next </ion-button> 
    </ion-col> 
  </ion-row> 
</ion-list>

2. 修改TS逻辑（play-quiz.ts）

导入Angular的视图查询装饰器，获取所有按钮列表后，更新点击事件的处理逻辑：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-play-quiz',
  templateUrl: './play-quiz.html',
  styleUrls: ['./play-quiz.scss']
})
export class PlayQuizComponent {
  answer: any = "1";
  // 获取所有带有#answerButtons引用的按钮
  @ViewChildren('answerButtons') answerButtons!: QueryList<ElementRef>;

  onClick(ionicButton: any, btn: string) {
    if(this.answer === btn){
      // 点击正确选项：仅标记当前按钮为绿色
      ionicButton.color = 'success';
    } else {
      // 点击错误选项：标记当前按钮为红色，同时找到正确答案按钮设为绿色
      ionicButton.color = 'danger';
      this.answerButtons.forEach(buttonEl => {
        const buttonInstance = buttonEl.nativeElement;
        if(buttonInstance.id === this.answer){
          buttonInstance.color = 'success';
        }
      });
    }
  }
}

方案二：直接绑定正确答案按钮（适配单题固定场景） #

如果当前题目是固定的，正确答案对应的按钮不会动态变化，可以直接给正确按钮单独加模板引用，操作更简洁：

1. 更新模板（play-quiz.html）

给正确答案按钮（id="1"的按钮）添加专属模板引用#correctAnswer：

<ion-button id="1" #first #correctAnswer class="btn" expand="block" (click)="onClick(first,'1')"> 
  Largest Railway Station 
</ion-button>

2. 修改TS逻辑（play-quiz.ts）

导入ViewChild获取正确按钮的实例，然后更新点击事件：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-play-quiz',
  templateUrl: './play-quiz.html',
  styleUrls: ['./play-quiz.scss']
})
export class PlayQuizComponent {
  answer: any = "1";
  // 获取正确答案按钮的引用
  @ViewChild('correctAnswer') correctAnswer!: ElementRef;

  onClick(ionicButton: any, btn: string) {
    if(this.answer === btn){
      ionicButton.color = 'success';
    } else {
      ionicButton.color = 'danger';
      // 直接设置正确按钮为绿色
      this.correctAnswer.nativeElement.color = 'success';
    }
  }
}

额外优化建议 #

如果想避免用户重复点击选项（提升答题体验），可以在点击后禁用所有按钮，只需要在onClick方法末尾添加：

// 方案一的禁用方式
this.answerButtons.forEach(buttonEl => {
  buttonEl.nativeElement.disabled = true;
});

// 方案二的禁用方式
this.answerButtons?.forEach(buttonEl => {
  buttonEl.nativeElement.disabled = true;
});

内容的提问来源于stack exchange，提问作者Unnati Patadia