Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 Unused label error

I'm trying to follow official tutorial in Angular 2 website. This tutorial

I'm getting following error in atom IDE:

Unused label.at line 8 col 1

Cannot assign to 'Hero' because it is not a variable.at line 8 col 7

Following is my code:

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

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

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
      <h2>{{hero.name}} details!</h2>`
})

export class AppComponent {
    title = 'Tour of Heroes';
    hero = 'Windstorm';
}

And the result:

Screen Shot

What I have done wrong? Help is appreciated.

like image 469
Janaka Dombawela Avatar asked Jan 25 '17 11:01

Janaka Dombawela


2 Answers

just keep following the tutorial and you will find the answer a bit later on the page:

export class AppComponent {
    title = 'Tour of Heroes';
    heroes = HEROES;
    selectedHero: Hero;
    onSelect(hero: Hero): void {
    this.selectedHero = hero;
}

Reference: https://angular.io/tutorial/toh-pt3

like image 174
Daniel Avatar answered Nov 16 '22 23:11

Daniel


According to the tutorial you are referring to, the hero field initialization is supposed to be inside the AppComponent:

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

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

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
      <h2>{{hero.name}} details!</h2>`
})

export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
      id: 1,
      name: 'Windstorm'
    };
}
like image 43
admax Avatar answered Nov 16 '22 21:11

admax