角4サンプルのチュートリアルタイプのスクリプトエラー

Question

私は角度のウェブサイトにあるチュートリアルを試しています。私はつまずくと私は問題を把握することはできません。

私はangle cliを使ってプロジェクトを作成しました。

app.component.ts

import { Component } from '@angular/core'; 
import {Hero} from './hero'; 



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


@Component({ 
    selector: 'app-my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
    selectedHero: Hero; 
    heroes = HEROES; 
    onSelect(hero: Hero): void { 
    this.selectedHero = hero; 
    } 
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 

import { AppComponent } from './app.component'; 
import {HeroDetailComponent} from './hero-detail.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeroDetailComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

主人公-detail.component.ts

import {Component, Input} from '@angular/core'; 
import {Hero} from './hero'; 
@Component({ 
selector: 'app-hero-detail', 
templateUrl: './hero-detail.component.html' 
}) 
export class HeroDetailComponent { 
@Input() hero: Hero; 
} 

hero.ts

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

Srcの構造：

TSエラー以下のアプリ

の起動時に取得

コンパイルに失敗しました。

/Users/name/Documents/workspaces/angular-tutorial1/firstapp/src/app/hero-detail.component.ts （3,12）： '{セレクタ：番号; templateUrl：文字列; } ' は、'コンポーネント 'タイプのパラメータに割り当てられません。タイプ ' 'セレクタ 'は互換性がありません。 タイプ 'number'はタイプ 'string'に割り当てられません。

Answer 1

app-component.htmlのような行がありますか？

<app-hero-detail [hero]="selectedHero"></app-hero-detail>