时间戳

首页 > 解决方案 > 如何突出显示垫单选按钮行？

angular - 如何突出显示垫单选按钮行？

问题描述

编辑：https ://stackblitz.com/edit/angular-uhuwie

我很难突出显示特定的 mat-radio-button 行。选择正确的选项后，它似乎突出显示了所有行。如果所选行与正确答案匹配，则仅该行应突出显示为绿色，否则突出显示为红色。我还需要每页显示一个问题，并在显示答案时将解释移至问题所在的位置。我的代码如下：

<div *ngFor="let option of question.options">
  <div class="form-group">
    <mat-radio-group class="form-control" formControlName="answer" name="answer" (change)="radioChange($event)">
      <div [style.backgroundColor]="selectedRadioOption === question.correctAnswer ? '#00c853': 'ff0000'">
        <mat-radio-button color="primary" name="radio-group" [value]="option.optionValue" (click)="validate(answer)">
          <label>{{ option.optionText }}</label>
        </mat-radio-button>
      </div>
    </mat-radio-group>
  </div>
</div>

标签： angularangular-material

解决方案

您还需要检查该选项是否与所选选项相同。

<div *ngFor="let option of question.options">
  <div class="form-group">
    <mat-radio-group class="form-control" formControlName="answer" name="answer" (change)="radioChange($event)">
      <div 
        [style.backgroundColor]=
            "selectedRadioOption === question.correctAnswer &&
             selectedRadioOption === option.optionValue
             ? '#00c853': 'ff0000'">
        <mat-radio-button color="primary" name="radio-group" [value]="option.optionValue" (click)="validate(answer)">
          <label>{{ option.optionText }}</label>
        </mat-radio-button>
      </div>
    </mat-radio-group>
  </div>
</div>

推荐阅读