MoSheikh MoSheikh - 5 months ago 96
AngularJS Question

Angular 2 Heroes Tutorial missing repeat values

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

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.

Comments