Question

编辑：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>

Answer 1

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

<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>

角高光垫单选按钮行

1 个答案: