Angular4: cannot read the property of undefined

Question

I am trying to learn angular4 with the tutorial they provided in website

Here is the code

hero.ts

export  class  Hero{

    constructor(
        public  id: number,public name: string
    ){}
}

in component.ts

import { Component } from '@angular/core';

import {Hero }  from  './hero';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {


  title : string;
  hero  : string;
  selectedHero: Hero;

  heroes = [
      new Hero(1, 'Windstorm'),
      new Hero(13, 'Bombasto'),
      new Hero(15, 'Magneta'),
      new Hero(20, 'Tornado')
  ]

  myHero = this.heroes[0];

  constructor(){
    this.title = 'Tour of heros';

  }

  onSelect(hero: Hero): void {
    this.selectedHero =hero;
  }
}

html

<ul>
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
    {{ hero.name }}
  </li>
</ul>
<p>{{selectedHero.name}}</p>

when click on each li i would like to display details in selected object but i got the following error

selectedHero.name is undefined

Your selectedHero is undefined initially, thus the error. — AVJT82
– AVJT82, Commented Oct 26, 2017 at 12:08
so How do i initiaze? and one more thing what is this selectedHero: Hero declaration means?? — Jabaa
– Jabaa, Commented Oct 26, 2017 at 12:09
declaration just means, that your variable selectedHero is of your Hero class. You can use *ngIf="selectedHero" like from answer, or use {{selectedHero?.name}} or initialize your hero with some default from your array; ngOnInit() { this.selectedHero = this.heroes[0]} or initialize your selectedHero as a new hero: selectedHero = new Hero(null, '') or use one-way-binding together with ngModelChange, example of the last option: stackoverflow.com/a/39755385/7741865 — AVJT82
– AVJT82, Commented Oct 26, 2017 at 12:19

Christian Benseler · Accepted Answer · 2017-10-26 12:20:39Z

1

Check in the template if selectedHero is set before access any of its property

<p *ngIf="selectedHero">{{selectedHero.name}}</p>

or create an empty instance in the component (updated answer)

selectedHero: Hero = new Hero(12, 'somename');

edited Oct 26, 2017 at 12:20

answered Oct 26, 2017 at 12:10

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

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

6 Comments

Jabaa Over a year ago

selectedHero: Hero = new Hero(); this declaration throws type expected error

AVJT82 Over a year ago

Yes, that is because you have the constructor set up that you need to give the properties some intial value :)

Christian Benseler Over a year ago

I have updated my answer providing parameters to the constructor. It wasn't clear that they are 'required fields'.

AVJT82 Over a year ago

@ChristianBenseler well if you look at the class, it has the properties in the constructor, so it's pretty clear ;)

Christian Benseler Over a year ago

It means that the type of selectedHero property is Hero. This is a typescript's feature.

|

Collectives™ on Stack Overflow

Angular4: cannot read the property of undefined

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related