выделите правильный ответ, если в Angular 8 выбран неправильный ответ

Question

Мне нужна помощь с выделением правильного ответа зеленым цветом и галочкой в ​​то же время, когда выбран неправильный ответ (который выделен красным). Пожалуйста, смотрите код моей формы ниже:

<form #quizForm="ngForm" [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <ol class="form-group">
    <mat-radio-group formControlName="answer" name="answer" (change)="radioChange($event.value)"
      (click)="question.selectedOption = option">
       <div class="radio-options" *ngFor="let option of question.options">
         <mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
          [checked]="question.selectedOption == option"
          [ngClass]="{'is-correct': isCorrect(option.optionValue),
                      'is-incorrect': isIncorrect(option.optionValue)}">
          <li>{{ option.optionText }}</li>

          <mat-icon class="feedback-icon" *ngIf="isCorrect(option.optionValue)">done</mat-icon>
          <mat-icon class="feedback-icon" *ngIf="isIncorrect(option.optionValue)">clear</mat-icon>
        </mat-radio-button>


private buildForm() {
  this.formGroup = this.fb.group({
    answer: ['', Validators.required]
  });
}

radioChange(answer: number) {
  this.selectedOption = answer;
  // this.answer.emit(answer);
  this.displayExplanation();
}

isCorrect(option: number): boolean {
  return option === this.question.answer && this.selectedOption === option;
}

isIncorrect(option: number): boolean {
  return option !== this.question.answer && this.selectedOption === option;
}

Answer 1

Я не уверен насчет того, как вы кодируете в своих методах. Но я думаю, что в идеале ваш код выглядит как -

        <mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
          [checked]="question.selectedOption == option"
          [ngClass]="{'is-correct': isCorrect(option.optionValue),
                      'is-incorrect': !isCorrect(option.optionValue)}">
          <li>{{ option.optionText }}</li>

          <mat-icon class="feedback-icon" *ngIf="isCorrect(option.optionValue)">done</mat-icon>
          <mat-icon class="feedback-icon" *ngIf="!isCorrect(option.optionValue)">clear</mat-icon>
        </mat-radio-button>

, а ваш метод должен выглядеть следующим образом -

isCorrect(option: number): boolean {
  this.selectedOption = option;
  return option === this.question.answer
}

PS: нет необходимости добавлять обработчик кликов, если вы уже добавлены change мероприятие. Просто установите значение в обработчике изменений, или вы можете использовать привязку модели, используя ngModel, если хотите.