Angular 2 Ошибка неиспользуемой метки

Я пытаюсь следовать официальному учебнику на веб-сайте Angular 2. Этот учебник

Я получаю следующую ошибку в IDE атома:

Неиспользуемая метка. строка 8 col 1

Невозможно назначить "Hero", потому что это не переменная. строка 8 col 7

Ниже приведен мой код:

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';
}

Ответ 1

В соответствии с учебным пособием, о котором вы говорите, инициализация поля hero должна находиться внутри 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'
    };
}

Ответ 2

просто следуйте инструкциям, и вы найдете ответ чуть позже на странице:

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

Ссылка: https://angular.io/tutorial/toh-pt3