Angular форма с логическим значением параметра - PullRequest
Новая
       4

Angular форма с логическим значением параметра

0 голосов
/ 01 марта 2020

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

export interface Option {
  text: string;
  correct: boolean;
}
type Options = Option[];


<div class="radio-options" *ngFor="let option of question.options; let i = index">
    <mat-radio-button
      class="option"
      name="option-radio-button"
      [value]="option['correct']"
      [class.is-correct]="isCorrect(option['correct'])"
      [class.is-incorrect]="isIncorrect(option['correct'])">

      <li>{{ option.text }}</li>
      <mat-icon class="feedback-icon" *ngIf="isCorrect(option['correct'])">done</mat-icon>
      <mat-icon class="feedback-icon" *ngIf="isIncorrect(option['correct'])">clear</mat-icon>
    </mat-radio-button>

и в моем файле TS: 

isCorrect(correctval: boolean): boolean {
  return correctval === this.question.options['correct'];
}

isIncorrect(correctval: boolean): boolean {
  return correctval !== this.question.options['correct'];
}

1 Ответ

1 голос
/ 01 марта 2020

Ваш StackBlitz показывает Option is интерфейс с правильным свойством: логическое. В то время как у Вопроса есть параметры свойства: Option [] - массив объектов Option.

Таким образом, вы можете сослаться на это в шаблоне, например: 

option.correct

И передать индекс с новым свойством из выбранного для сохранения, если выбран для сравнения, чтобы исправить: 

 <div class="radio-options" *ngFor="let option of question.options; let i = index">
        <mat-radio-button
          class="option"
          name="option-radio-button"
          [value]="i"
          (change)="setSelected(i)"
          [class.is-correct]="option.selected && option.correct)"
          [class.is-incorrect]="option.selected && !option.correct">

ts: 

    setSelected(index)
{
     question.options.forEach(o => o.selected = false);
     question.options[i].selected = true;
}
...