Angular not able to retrieve list of heroes in Tour of Heroes

Question

I am trying to build up the Tour of Heroes Application from The Angular Docs. After Defining my Array of Heroes and trying to loop through it, it only brings up empty divs.

this is my code below:

html

<h1>{{title}}</h1>
<ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelectHero(hero)">
        <span class="badge">{{hero.id}}</span>{{hero.name}}
    </li>
</ul>
<div> 
    <h2>{{selectedHero.name}} details!</h2>
    <div><label>id: </label>{{selectedHero.id}}</div>
    <div>
        <label>name: </label>
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </div>
</div>

typescript

import { Component } from '@angular/core';
import { Hero } from './shared/model/hero';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:string;
  heroes: Hero[];
  selectedHero: Hero;
  constructor(){
    this.title = 'app';
    this.heroes = HEROES;
  }
  onSelectHero(hero: Hero){
    this.selectedHero = hero;
  }
}
const HEROES: Hero[] = [
  {
    id: 11,
    name: "NightOwl",
  },
  {
    id: 12,
    name: "Batman",
  },
  {
    id: 13,
    name: "Superman",
  },
  {
    id: 14,
    name: "Spiderman",
  },
  {
    id: 15,
    name: "Hulk",
  }
];

Why is this is happening?

Answer 1

Your loop is not printing div elements but il elements (clickable). You have to click on one of the il elements to present the "Selected Hero" in the div of your html template.

If you want to show directly the list of heroes in div elements, you have to replace your template with:

  <h1>{{title}}</h1>
  <div *ngFor="let hero of heroes"> 
   <h2>{{hero.name}}</h2>
   <div><label>id: </label>{{hero .id}}</div>
   <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name"/>
   </div>
  </div>

Answer 2

Based on your component code and comment below your question:

ERROR TypeError: Cannot read property 'name' of undefined

Option1: you need to initialize selectedHero at your component

selectedHero: Hero = new Hero();

Option2: use safe navigator ?

<div> 
  <h2>{{selectedHero?.name}} details!</h2>
  <div><label>id: </label>{{selectedHero?.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero?.name" placeholder="name"/>
  </div>
</div>

Option3: use ngIf to avoid accessing selectedHero while it's not been initiailized

<div *ngIf="selectedHero"> 
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </div>
</div>

---

Comment: The difference between Option1,2 and Option3 is that there'll be nothing about selectedHero been displayed while selectedHero is not been initialized at Option3.