Инкрементная функция индекса, привязанная к кнопке в Angular, не увеличивает индекс и не выполняет итерацию по массиву

Question

Инкрементная функция индекса привязки к кнопке в Angular не увеличивает индекс и не выполняет итерацию по массиву при нажатии кнопки.Независимо от того, сколько раз я продолжаю нажимать на кнопку, я вижу один и тот же первый [0] вопрос из массива.Почему так?

component.html

<div class="card-body">
    <h5 class="card-title">{{questions}}</h5>
    <input *ngFor="let answer of answers"
    type="radio" name="ans" [value]="answer"> {{answer}}<br>
    <button class="btn btn-primary" (click)="nextQuestion()">Go somewhere</button>
  </div>

component.ts

export class QuostionnaireComponent implements OnInit {
  questions:any;
  answers:any;
  correstAnswers:any;
  incremental:Observable = 0;
  constructor(private questionnaire: QuestionnaireService) {
        this.questions = this.questionnaire.theQuestion[this.incremental];
        this.answers = this.questionnaire.theChoices[this.incremental];
   }
   nextQuestion():void {
     this.incremental++;
   }

  ngOnInit() {

  }
}

Как правильно просмотреть список вопросов и ответов по нажатию кнопки?

Кроме того, в моих переключателях значения работают нормально, и я получаю привязку всех трех вариантов ответа к [value], но рядом с переключателем нет слов, как будто мои > {{answer}}<br> игнорируются.Никаких ошибок, хотя.Спасибо за помощь.

Answer 1

Ваша проблема заключалась в том, что вы никогда не переходили к следующему набору вопросов / ответов от вашего сервиса.В вашем nextQuestion вам нужно будет переназначить this.questions и this.answers для следующего набора, чтобы ваш компонент мог повторно выполнить рендеринг с использованием нового значения.

Answer 2

Попробуйте получить.Получатель будет запускаться каждый раз, когда обнаруживается изменение Angular и забирает данные для страницы.

export class QuostionnaireComponent implements OnInit {

  get questions(): any{
    return this.questionnaire.theQuestion[this.incremental];
  }

  get answers(): any{
    return this.questionnaire.theChoices[this.incremental];
  }      
  correstAnswers:any;
  incremental: number = 0;
  constructor(private questionnaire: QuestionnaireService) { }
   nextQuestion():void {
     this.incremental++;
   }

  ngOnInit() {

  }
}