Getting undefined object error in Typescript using Angular

Question

So I am following the Traversy Media new [Angular crash course]: https://www.youtube.com/watch?v=3dHNOWTI7H8 around 39:45 and getting object undefined errors constantly.

Here is the picture of the error which says object is possibly 'undefined': object is possibly 'undefined

This worked in task-item.component.html

<p *ngFor="let task of tasks">
  {{task.text}}
</p>

This object is possibly 'undefined' task-item.component.html

<div class="task">
    <h3>{{task.text}}</h3>
    <p>{{task.day}}</p>
</div>

task-item.component.ts

import { Component, OnInit, Input } from '@angular/core';
    import {Task} from 'src/Task';
    
    @Component({
      selector: 'app-task-item',
      templateUrl: './task-item.component.html',
      styleUrls: ['./task-item.component.css']
    })
    export class TaskItemComponent implements OnInit {
      @Input() task?: Task;
    
      constructor() {
      }
    
      ngOnInit(): void {
      }
    
    }

I have put a tsconfig.json rule "strictPropertyInitialization": false

Alann · Accepted Answer · 2022-03-21 21:20:32Z

2

It's because you set it as a an optional using ?

You can either remove ? which is not a good practice if your item can be null, or you can just do this in the html

<div class="task">
  <h3>{{task?.text}}</h3>
  <p>{{task?.day}}</p>
</div>

It will display the value if the variable is initialized, and don't throw an error

answered Mar 21, 2022 at 21:20

Alann

6575 silver badges19 bronze badges

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

Comments

Zze · Accepted Answer · 2022-03-21 21:22:10Z

2

The ? here indicates that this is a nullable object.

@Input() task?: Task;

If you always pass task to app-task-item then just remove the ?

@Input() task: Task;

Or you can add a conditional in your html, and remove the ? in your .ts

@Input() task: Task;
...
<div class="task">
  <h3>{{task?.text}}</h3>
  <p>{{task?.day}}</p>
</div>

answered Mar 21, 2022 at 21:22

Zze

18.9k14 gold badges95 silver badges125 bronze badges

Comments

Anthony F · Accepted Answer · 2022-03-21 21:34:58Z

0

If you're not passing a value into task when you instantiate the component, which than it would be undefined.

If are ever going to instantiate task-item without a task input you could add something like this to your ngOnInit

const blankTask: Task = {
  text: 'placeholder text',
  day: 'placeholder day',
};
...
ngOnInit() {
    this.task = this.task || blankTask;
  }

This means you do not always have to pass in a task to the component. Working StackBlitz

answered Mar 21, 2022 at 21:34

Anthony F

1112 bronze badges

Comments

Samba · Accepted Answer · 2022-03-21 23:01:51Z

0

To solve this I add *ngIf

  <div class="task" *ngIf="task">
      <h3>{{task.text}}</h3> 
      <p>{{task.day}}</p> 
    </div>

answered Mar 21, 2022 at 23:01

Samba

1762 silver badges7 bronze badges

Collectives™ on Stack Overflow

Getting undefined object error in Typescript using Angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related