Угловой 2, не показывающий выход на экране

Question

Поскольку я начал изучать Угловой 2, я хорошо разбираюсь в основных понятиях. Но когда я попытался запустить нижеприведенную программу, я не получаю значения, которые статически задаются в коде.

import { Component,Input } 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><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>' 

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

Может кто-то пожалуйста, указать, где я не прав, и кто-то может показать, как отладить Угловое код так, что я могу узнать основы хорошо и попробовать сложные вещи с помощью самообучения и решить из основных вопросов по себя?

The output which I got

Answer 1

Это должно работать

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

}) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
    hero: Hero = { 
    id: 1, 
    name: 'Windstorm' 
    }; 
} 

С hero = 'Windowstorm';{{hero.name}} является недействительным, поскольку hero не имеет name свойство. Я уверен, что в вашей консоли браузера отображается сообщение об ошибке. Пожалуйста, добавьте такие ошибки в будущие вопросы.