Angular 2 Heroes Tutorial missing repeat values

Question

I'm trying to follow the Angular 2 "Tour of Heroes" Tutorial, but I've run into a problem. After declaring the "onSelect" method for the (click) event, the list of 'let hero of heroes' goes blank. This is what I have so far:

app.component.ts:

import {Component} from '@angular/core';
import {MyComponent} from './my-component';



@Component({
    selector: 'my-app',
    template: `

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

        `,

    directives: [MyComponent]

    styles: [`
      .selected {
        background-color: #CFD8DC !important;
        color: white;
      }
      .heroes {
        margin: 0 0 2em 0;
        list-style-type: none;
        padding: 0;
        width: 15em;
      }
      .heroes li {
        cursor: pointer;
        position: relative;
        left: 0;
        background-color: #EEE;
        margin: .5em;
        padding: .3em 0;
        height: 1.6em;
        border-radius: 4px;
      }
      .heroes li.selected:hover {
        background-color: #BBD8DC !important;
        color: white;
      }
      .heroes li:hover {
        color: #607D8B;
        background-color: #DDD;
        left: .1em;
      }
      .heroes .text {
        position: relative;
        top: -3px;
      }
      .heroes .badge {
        display: inline-block;
        font-size: small;
        color: white;
        padding: 0.8em 0.7em 0 0.7em;
        background-color: #607D8B;
        line-height: 1em;
        position: relative;
        left: -1px;
        top: -4px;
        height: 1.8em;
        margin-right: .8em;
        border-radius: 4px 0 0 4px;
      }
      `]

})
export class AppComponent { 

    title = 'Tour of Heroes';

    public heroes = HEROES;

    selectedHero: Hero;

    function onSelect(hero: Hero) {
        selectedHero: hero;
    }

}



export class Hero {
    id: number;
    name: string;
}

const HEROES: Hero[] = [
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'Narco' },
    { id: 13, name: 'Bombasto' },
    { id: 14, name: 'Celertitas' },
    { id: 15, name: 'Megneta' },
    { id: 16, name: 'Rubberman' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }

];

The errors I'm getting on the terminal:

app/app.component.ts(28,2): error TS1005: ',' expected.

app/app.component.ts(87,2): error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.

app/app.component.ts(91,1): error TS1128: Declaration or statement expected.

Answer 1

My guess based on the errors you get is:

- 1 add comma after directives array declaration on line 28
- 2 remove 'function' before your onSelect on line 87
- 3 assign value to var selectedHero like this on line 88 
        selectedHero = hero;

Answer 2

As your error stack trace tells you:

1. Add a comma after directives: [MyComponent],

2. Remove the function keyword from your onSelect function declaration.

3. Assign the hero variable to this.selectedHero instead of just selectedHero in your onSelect function.

Note that even if you'll do all these, when running the code you won't see the list of heroes, as there is an extra step you should implement from the tutorial for the list to be displayed properly. So, fix all these issues, then go further in your tutorial and everything will work.