Angular2 Cannot read property name of undefined

Question

I am beginning to learn Angular2  I ve been following the Heroes Tutorial provided at angular io  All was working fine until  being annoyed by the clutter of HTML using the template   I used template URL in its place  and moved the HTML to a file named hero html  The error that is generated is   Cannot read property  name  of undefined   Strangely  the heroes variable which points to an array of objects can be accessed so that ngFor will produce the correct amount of  li  tags according to the number of objects in the array  However  the data of the objects of the array cannot be accessed  Furthermore  even a simple variable holding some text  will not display using      brackets in the HTML  see provided code    app component ts  import   Component   from   angular core    Component     selector   my-app     templateUrl     hero html     styleUrls     styles css       export class AppComponent     title    Tour of Heroes     heroes   HEROES    selectedHero Hero     onSelect hero  Hero  void        this selectedHero   hero         export class Hero     id  number     name  string     const HEROES  Hero            id  1  name   Mr  Nice          id  2  name   Narco          id  3  name   Bombasto          id  4  name   Celeritas          id  5  name   Magneta          id  6  name   RubberMan          id  7  name   Dynama          id  8  name   Dr IQ          id  9  name   Magma          id  10  name   Tornado         hero html   lt h1 gt   title   lt  h1 gt   lt h2 gt My Heroes lt  h2 gt   lt ul class  heroes  gt     lt li  ngFor  let hero of heroes  gt       lt span class  badge  gt   hero id   lt  span gt    hero name      lt  li gt   lt  ul gt   lt h2 gt   hero name   details  lt  h2 gt   lt div gt       lt label gt id   lt  label gt   hero id    lt  div gt   lt div gt       lt label gt name   lt  label gt       lt input   ngModel    selectedHero name  placeholder  name  gt   lt div gt    Here is a photo

User · Answer

In order to avoid this  you could as well initialize the selectedHero member of your component to an empty object  instead of leaving it undefined    In your example code  that would give something like this     export class AppComponent     title    Tour of Heroes     heroes   HEROES    selectedHero Hero   new Hero       onSelect hero  Hero  void        this selectedHero   hero

User · Answer

You just needed to read a little further and you would have been introduced to the  ngIf structural directive   selectedHero name doesn t exist yet because the user has yet to select a hero so it returns undefined     lt div  ngIf  selectedHero  gt     lt h2 gt   selectedHero name   details  lt  h2 gt     lt div gt  lt label gt id   lt  label gt   selectedHero id   lt  div gt     lt div gt       lt label gt name   lt  label gt       lt input   ngModel    selectedHero name  placeholder  name   gt     lt  div gt   lt  div gt    The  ngIf directive keeps selectedHero off the DOM until it is selected and therefore becomes truthy    This document helped me understand structural directives

User · Answer

This line   lt h2 gt   hero name   details  lt  h2 gt    is outside  ngFor and there is no hero therefore hero name fails

User · Answer

The variable selectedHero is null in the template so you cannot bind selectedHero name as is  You need to use the elvis operator    for this case   lt input  ngModel   quot selectedHero  name quot   ngModelChange   quot selectedHero name    event quot    gt   The separation of the   ngModel   into  ngModel  and  ngModelChange  is also needed because you can t assign to an expression that uses the elvis operator  I also think you mean to use   lt h2 gt   selectedHero  name   details  lt  h2 gt   instead of   lt h2 gt   hero name   details  lt  h2 gt

User · Answer

You were getting this error because you followed the poorly-written directions on the Heroes tutorial  I ran into the same thing   Specifically  under the heading Display hero names in a template  it states       To display the hero names in an unordered list  insert the following   chunk of HTML below the title and above the hero details    followed by this code block    lt h2 gt My Heroes lt  h2 gt   lt ul class  heroes  gt     lt li gt       lt  -- each hero goes here -- gt     lt  li gt   lt  ul gt    It does not instruct you to replace the previous detail code  and it should  This is why we are left with    lt h2 gt   hero name   details  lt  h2 gt    outside of our  ngFor    However  if you scroll further down the page  you will encounter the following      The template for displaying heroes should look like this     lt h2 gt My Heroes lt  h2 gt   lt ul class  heroes  gt     lt li  ngFor  let hero of heroes  gt       lt span class  badge  gt   hero id   lt  span gt    hero name      lt  li gt   lt  ul gt    Note the absence of the detail elements from previous efforts   An error like this by the author can result in quite a wild goose-chase  Hopefully  this post helps others avoid that

User · Answer

This worked for me   export class Hero     id  number     name  string      public Hero i  number  n  string        this id   0       this name                 and make sure you initialize as well selectedHero   selectedHero  Hero   new Hero

User · Answer

In Angular  there is the support elvis operator    to protect against a view render failure  They call it the safe navigation operator  Take the example below  The current person name is   nullObject  name    Since it is trying to access name property of a null value  the whole view disappears and you can see the error inside the browser console  It works perfectly with long property paths such as a  b  c  d  So I recommend you to use it everytime you need to access a property inside a template

[angular] Angular2: Cannot read property 'name' of undefined

Examples related to angular

Examples related to angular2-template