Угловой 6: Викторина с FormGroup и FormControl

Question

У меня есть компонент викторины и интерфейс с именем IQuiz, который содержит детали викторины и множество вопросов. Массив вопросов содержит один вопрос, 4 ответа и правильный ответ, который является номером вопроса.

Когда я проверяю ответ, все остальные вопросы проверяются с тем же ответом, и все ответы меняются, когда я меняю один ответ. Я не использую *ngFor, я получаю текущий вопрос каждый раз, когда нажимаю на предыдущий или следующий, и я знаю, что это, вероятно, является причиной, но я не знаю, как это исправить.

это файл компонента ts и файл html:

// Quiz.Componet.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { ActivatedRoute, Router, Routes, NavigationEnd } from '@angular/router';
import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';

import { ICourse, IUnit, IQuiz, IQuestion } from '../../course';
import { CourseService } from '../../course.service';

import * as _ from 'underscore';

@Component({
  selector: 'quiz-course',
  templateUrl: './course-quiz.component.html',
  styleUrls: ['./course-quiz.component.sass']     
})

export class CourseQuizComponent implements OnInit {

  @Input() questions: IQuestion[];
  @Input() quizName: string;
  @Input() quizId: string;

  public show: boolean;
  public showQuestions: boolean;
  public currentQuestion: IQuestion;
  public currentIndex: number;
  public currentUnit: number;


  answersArray: any[];                // array of answers the user choose
  answersIndex: number;                      // current index of answersArray
  sum: number = 0;                       // number of answers the user answered
  public quizForm: FormGroup         // radio buttons in the quiz form

  constructor(private courseService: CourseService,
      private route: ActivatedRoute,
      private router: Router,
      private fb: FormBuilder) { }

  ngOnInit() {
    this.showQuestions = false;
    this.currentUnit = +this.route.snapshot.paramMap.get('unitId');

    this.quizForm = this.fb.group({
      selected: [{value: ''}, [Validators.required]]
    });

    this.getCurrentQuestion(0);
  }

  // get current question
  getCurrentQuestion(index: number) {
    this.currentIndex = index;
    this.currentQuestion = this.questions[index];
  }

  // insert to local array the answers of the user after he press submit
  answered() {
    debugger;
  }

  onSubmit() { }

  onDestroy() {  }

}

<!-- Quiz.Component.html -->

  <div class="text-center" *ngIf="!showQuestions">
    <h5 class="text-left">Unit {{currentUnit}}</h5>
    <h1>{{quizName}}</h1>
    <p class="text-left"> Now that you've finished this unit, It's
        time to take a short quiz and see what you learned so far!
        Good Luck!
      </p>
      <p class="text-left"> 4 questions </p>
      <a (click) = "showQuestions = true"><h5 class="navigate">Start Quiz</h5></a>
  </div>

    <div class="container text-center" *ngIf="showQuestions">
        <div class="text-left" *ngIf="currentQuestion">
          <form [formGroup]="quizForm" (ngSubmit)="onSubmit()">
            <!-- items being paged -->
            <h3>Question {{currentIndex + 1}}/{{questions.length}}</h3>
            <h6>{{currentQuestion.question}}</h6>
            <div class="form-group">
              <mat-radio-group formControlName="selected" class="form-control">
                <ul class="items">
                  <li><mat-radio-button color="primary" id="answer1" value="1"></mat-radio-
                      button><label for="answer1">1. {{currentQuestion.answer1}}</label></li>
                  <li><mat-radio-button color="primary" id="answer2" value="2"></mat-radio-
                      button><label for="answer2">2. {{currentQuestion.answer2}}</label></li>
                  <li><mat-radio-button color="primary" id="answer3" value="3"></mat-radio-
                      button><label for="answer3">3. {{currentQuestion.answer3}}</label></li>
                  <li><mat-radio-button color="primary" id="answer4" value="4"></mat-radio-
                      button><label for="answer4">4. {{currentQuestion.answer4}}</label></li>
                </ul>
              </mat-radio-group>
            </div>
          </form>
        </div>

        <!-- Prev Next Bar -->
        <footer id="footer" class="row justify-content-between navbar-fixed-bottom">

          <!-- Next and Prev links -->
          <div class="col-4 text-left">
            <div *ngIf="currentIndex > 0 ">
              <h3 class="prev" *ngIf="!isPrevQuiz" (click)=getCurrentQuestion(currentIndex                      -1)>Previous question</h3>
            </div>
          </div>
          <div class="col-4 text-right">
            <div *ngIf="currentIndex < questions.length - 1">
              <h3 class="navigate" *ngIf="!isNextQuiz"
              (click)=getCurrentQuestion(currentIndex+1)>Next question</h3>
            </div>
            <div *ngIf="currentIndex == questions.length - 1">
              <button class="submit">Submit Quiz</button>
            </div>
          </div>
        </footer>
      </div>