Index incremental function bind to a button in Angular doesn't increment the index and do not iterate through array

Question

Index incremental function bind to a button in Angular doesn't increment the index and do not iterate through array on the button click. No matter how many times I keep clicking the button, I see the same first [0] question from array. Why is so?

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() {

  }
}

How can I iterate through array of questions and answers on button click correctly?

Also in my radio buttons, values work fine and I get all three answer options bind to [value] but there are no words next to a radio button, it's like my > {{answer}}<br> gets ignored. No errors, though. Thanks for the help.

Not going in details of your code, but constructor initializes once so you always stay on the same value which happens to be [0] in your case. You may want to move your constructor code to ngOnInit and then probably re-assign questions/answers in ngOnChanges — Rikin
– Rikin, Commented Dec 12, 2018 at 21:01
@Rikin Thanks, I didn't know that. But that still doesn't help. In docs for ngOnChanges it says called when any data-bound property of a directive changes. I don't use directives. Only this in my component.ts this.questions = this.questionnaire.theQuestion[this.incremental]; so it's not gonna work for me. Any ideas? — Limpuls
– Limpuls, Commented Dec 12, 2018 at 21:07
in your nextQuestion you would need to reassign this.questions and this.answers to next set so that your component can re-render using new value. — Rikin
– Rikin, Commented Dec 12, 2018 at 21:10
@Rikin thanks, it works. And no need for ngOnChanges, I think it serves different purpose. You should post this as an answer, I will accept it. And any idea regarding the radio buttons having no text next to them? It works binding the value, I can see in the console, but in the browser there are just 3 radio buttons next to each other. — Limpuls
– Limpuls, Commented Dec 12, 2018 at 21:15
Yeah that's kinda advanced topic I guess. I knew it from Angular 1 but if you look at the markup closely you can tell that ngFor is running on a HTML and in your case happens to be input which self closes so outside of it, internal scope value is not available from which you are trying to get answer. Hope that clarifies. — Rikin
– Rikin, Commented Dec 12, 2018 at 21:31

DeborahK · Accepted Answer · 2018-12-12 21:12:16Z

1

Try a getter. The getter will execute each time Angular's change detection kicks in and regets the data for the page.

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() {

  }
}

answered Dec 12, 2018 at 21:12

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rikin · Accepted Answer · 2018-12-12 21:17:46Z

0

Your issue was you never incremented to next set of question/answers from your service. In your nextQuestion you would need to reassign this.questions and this.answers to next set so that your component can re-render using new value.

answered Dec 12, 2018 at 21:17

Rikin

5,4842 gold badges17 silver badges22 bronze badges

Collectives™ on Stack Overflow

Index incremental function bind to a button in Angular doesn't increment the index and do not iterate through array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related