0

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.

Wazza
  • 1,725
  • 2
  • 17
  • 49
  • Quiz dont seem defined. – robbannn Jul 24 '17 at 21:08
  • Possible duplicate of [Observable type error: cannot read property of undefined](https://stackoverflow.com/questions/34734671/observable-type-error-cannot-read-property-of-undefined) – AT82 Jul 25 '17 at 07:31

2 Answers2

3

You should be using safe navigation operator in this case

*ngIf="pager.index < quiz?.questions?.length"

And

*ngIf="pager.index == quiz?.questions?.length"
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
0

It seems quiz variable is undefined, define it like this quiz: Quiz={}

Vlado Pandžić
  • 4,879
  • 8
  • 44
  • 75