Im getting the above error message but dont understand why as everything is defined as far as i can see.
Heres my html:
Apparently, the error occurs on line 1
<div *ngIf="pager.index < quiz.questions.length">
<h5 class="flow-text"><span [innerHTML]="quiz.questions[pager.index].text"></span></h5>
<br>
<div class="row text-left">
<div class="col s12 m12" *ngFor="let answer of quiz.questions[pager.index].answers">
<div class="answer">
<input type="checkbox" [checked]="answer.selected" (change)="onSelect(answer);"/><label class="black-text flow-text"> {{answer.text}} </label>
</div>
</div>
</div>
<footer class="row">
<div class="col s6 m6"></div>
<div class="col s6 m6">
<div *ngIf="pager.index < quiz.questions.length - 1">
<button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Next</button>
</div>
<div *ngIf="pager.index == quiz.questions.length - 1">
<button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Finish</button>
</div>
</div>
</footer>
</div>
<div *ngIf="pager.index == quiz.questions.length">
{{ selections }}
</div>
here is the component.ts
import { Component, OnInit, EventEmitter } from '@angular/core';
import { QuizService } from '../services/quiz.service';
import { Answer, Question, Quiz } from '../models/index';
import {MaterializeAction} from "angular2-materialize";
@Component({
selector: 'app-quiz',
templateUrl: './quiz.component.html',
styleUrls: ['./quiz.component.sass'],
providers: [QuizService]
})
export class QuizComponent implements OnInit {
quiz: Quiz;
pager = {
index: 0,
size: 1,
count: 1
};
selections: [string]
constructor(private quizService: QuizService) { }
ngOnInit() {
this.loadQuiz()
}
loadQuiz() {
this.quizService.get().subscribe(res => {
this.quiz = new Quiz(res);
this.pager.count = this.quiz.questions.length;
});
}
goTo(index: number) {
if (index >= 0 ) {
this.pager.index = index;
}
}
onSelect(answer: Answer) {
if (answer.selected = true) {
this.selections.splice(this.selections.indexOf(answer.text), 1);
} else {
this.selections.push(answer.text);
}
answer.selected = !answer.selected
}
}
i dont understand why its happening as despite the error compiling the code works and runs as it should, apart from the check boxes which i have asked in another question.