Error in Angular 6: Unable to access the 'length' property of an undefined variable

Encountering a peculiar issue here. I am using @Input to send data from the parent component to the child component, and even though I can retrieve the correct value in ngOnInit, I still receive an error message stating that the value is undefined. The data is clearly defined in the parent component, as confirmed by printing the values in both the parent and child components. Despite this, the error persists (even when attempting to access the data).

Attached are screenshots depicting the error and the retrieved value from console.log:

https://i.sstatic.net/lqlR5.png https://i.sstatic.net/HQZNI.png

Snippet of relevant parent HTML:

<quiz-course [quiz]="currentUnitQuiz"></quiz-course>

Parent Component TypeScript:

export class CoursePlayComponent implements OnInit {
  errorMessage: string;
  course: ICourse;
  courseId: number;

  public currentUnitQuiz: IQuiz;
  public showQuiz: boolean;
  
  constructor(private courseService: CourseService,
      private route: ActivatedRoute,
      private router: Router,
      private userProgressService: UserProgressService) { }

  ngOnInit() {
      this.courseId = JSON.parse(localStorage.getItem("courseId"));
      this.getCourse(this.courseId);
    }
    
  getCourse(id: number) {
      this.courseService.getCourse(id).subscribe(
          course => {
            this.course = course;
            
            if (this.route.snapshot.firstChild.data.type == 'quiz') {
              this.getQuiz(this.currentUnitPos);
            }
          },
          error  => this.errorMessage = <any>error);
      }
      
      getQuiz(currentUnitPosition: number) {
        this.showQuiz = true;
        this.currentUnitQuiz = this.course.units.find(u => u.position ===
        currentUnitPosition).quiz;
      }
 }

EDIT: Further code has been added for clarity. The same error occurs when attempting to access the length property, yet the value can still be printed and retrieved as expected.

Child Component TypeScript:

export class CourseQuizComponent implements OnInit {

  @Input() quiz: IQuiz;
  
  public currentQuestion: IQuestion;
  public currentIndex: number;
  public currentUnit: number;
  public userAnswers: number[] = [];
  public correctAnswers: number;

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

  ngOnInit() {
    console.log("length in child: ", this.quiz.questions.length); // **NOT** undefined
    this.restartQuiz();
  }
  
    restartQuiz() {
    this.currentUnit = +this.route.snapshot.paramMap.get('unitId');
    this.correctAnswers = 0;

    for(let i = 0; i < this.quiz.questions.length; i++) {
      this.userAnswers[i] = 0;
    }

    this.getCurrentQuestion(0);
  }

}

Interfaces:

export interface IQuiz {
  id: number;
  name: number;
  unit_id: number;
  unit_position: number;
  questions: IQuestion[];
}

export interface IQuestion {
  id: number;
  name: string;
  quiz_id: number;
  position: number;
  question: string;
  answer1: string;
  answer2: string;
  answer3: string;
  answer4: string;
  correct: number;
  selected: number;
}

Answer №1

When passing input to a child component, one way to prevent undefined issues is by using the onChanges lifecycle hook.

 import { OnChanges, SimpleChanges } from '@angular/core';

export class CourseQuizComponent implements OnInit, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
   for (const prop of Object.keys(changes)) {
    const chng = changes[prop];
    if (prop === 'quiz') {
      this.quiz = chng.currentValue;
      // utilize the quiz variable in restartQuiz() 
    }
  }
 }
 ngOnInit() {
   this.restartQuiz();
  }
}

Give this approach a try and inform me about its effectiveness.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Include a character in a tube using Angular

Hey everyone, I have a pipe that currently returns each word with the first letter uppercase and the rest lowercase. It also removes any non-English characters from the value. I'm trying to figure out how to add the ':' character so it will ...

Assign unique element IDs dynamically within an ngFor loop

Can anyone help me with assigning dynamic IDs to div elements inside an *ngFor loop? I want the divs to be named 'wave1, wave2, wave3' and so on. <li *ngFor="let episode of episodes; let i = index"> <div id="wave{{i}}& ...

Tips for preventing repetition of code in multiple entry points in Rollup

My goal is to use rollup to process a group of input files and generate multiple output files in the dist directory that all have some common code shared between them. Below is my current rollup configuration: import path from 'path'; import pat ...

An exception is thrown by TypeScript's readline.createInterface function

My current project involves creating an electron app. I am facing an issue in the main.ts file where I have constructed a seemingly simple class with a constructor that is not running as expected. The problem arises when the call to readline.createInterfac ...

Mastering the art of utilizing Angular Material's custom-palette colors for maximum impact. Unle

I have implemented a custom material-color palette where I defined the primary and accent palettes with specific shades as shown below: $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 ); $my-app-accent: mat-palette($md-lightaccent, 500,900 ...

Typescript mistakenly infers the wrong type: TS2339 error - it says that property 'selected' is not found on type 'string'

When examining the code snippet below, Typescript initially infers a type string for the inner element type of the values array. However, it subsequently raises an error indicating that string does not have the property "selected". let item = { values: [{ ...

Error 415 Unsupported Media Type when uploading files using Angular 12 with TypeScript

I'm currently working on a project using Angular 12 and Spring Boot for image uploads. I have successfully tested the API with Postman and it's working correctly on the backend. However, when I try to test the front end, I encounter the following ...

Error encountered in Jest mockImplementation: Incompatible types - 'string[]' cannot be assigned to 'Cat[]' type

Recently, I've been writing a unit test for my API using Jest and leveraging some boilerplate code. However, I hit a snag when an error popped up that left me scratching my head. Here is the snippet of code that's causing trouble: describe(' ...

Best practice in Angular 2: The difference between binding an object as a whole versus binding its individual

What is the best approach for a child component when dealing with object properties and change events? Example 1 <parent-component> <child-component [exampleInput]="object.val" (valueChanged)="updateObjectValue($event)"> ...

I'm fascinated by the way well-known websites like The Guardian are utilizing Angular, as I often notice that when I click on links, the entire page reloads

As a beginner in Angular, I recently explored popular websites that implement Angular or React. I discovered sites like The Guardian, New York Times, and Netflix. However, most of these sites have links that open in new pages, while the remaining ones ut ...

What are the steps to view output on VS Code using Typescript?

Currently, I am working on code challenges using Typescript in Visual Studio Code. However, whenever I attempt to run the code and view the output, I encounter an error stating "Code Language is not supported or defined". I have already set the language ...

How can you loop through an array of objects in TypeScript without relying on the traditional forEach

Currently, I'm working on an array of objects with the following structure. [ { "matListParent": "CH", "dParent": "CUST1", "isAllSelected": true, "childItems&qu ...

Converting an array of arguments into tuples within the range of <T extends Tuple> is denoted by [T, (...args: NonNullArray<T>) => any], where each tuple represents the argument of a

Let's start with a simple function that takes a tuple as its first argument and a function whose arguments are elements of the tuple that are not null as its second argument: let first: number | null | undefined; let last: number | null | undefined; l ...

Develop a user interface that includes the ability to have unspecified properties of an unspecified data type,

interface Sample { value?: string [prop: string]: any } const sampleObject: Sample = { title: 'John' } const data = sampleObject.title By including "any" in the interface, it eliminates the automatically assumed "string" type for the p ...

The parameter type (key: string, id: string, pagination: number) in the argument does not match the expected type of Boolean for the parameter

I'm facing an issue while trying to implement the following documentation: https://swr.vercel.app/ using my own setup: import React, { useEffect } from 'react' import PatientsTable from 'components/patients/PatientsTable' import ...

Angular is incorrectly updating all fields at once instead of updating only the intended one field

I am facing an issue with my *ngFor loop where I am attempting to update a number field on click, but it ends up updating all the items with the same value. Here is a snippet of my HTML: <form *ngFor="let product of products" [formGroup]=&quo ...

Limit the elements in an array within a specified range of dates

Currently, I am working on implementing a filter functionality for a data array used in a LineChart within my Angular application using TypeScript. The structure of the data array is as follows: var multi = [ { "name": "test1", "series": [ ...

React website successfully completes builds and deployments, however upon viewing, it displays as a blank white screen

Hi there, I am a beginner in web development and decided to experiment with building a React site. Everything was working perfectly on my local machine, so I followed a tutorial to host it on GitHub. The deployment process seemed fine without any errors. H ...

Ways to verify if TypeScript declaration files successfully compile with local JavaScript library

I have recently updated the typescript definitions in HunterLarco/twitter-v2, which now follows this structure: package.json src/ twitter.js twitter.d.ts Credentials.js Credentials.d.ts My goal is to verify that the .js files correspond correctly ...

Sending information to a service from the main.ts file in an Angular application

Within my Angular CLI application, I have a main.ts file that includes the following export statement. This file serves as a microservice that receives CONTEXT from another microservice. export default { async mount({ rootElement, context }: Extension) ...