Angular 4示例教程类型脚本错误

Question

我正在尝试在angular网站上给出的教程。我遇到了麻烦，我无法弄清楚问题。

我使用angular 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）：类型的参数＆＃39; {selector：number; templateUrl：string; }＆＃39;   不能分配给＆＃39;组件＆＃39;类型的参数。种类   property＆＃39; selector＆＃39;是不相容的。       输入＆＃39;数字＆＃39;不能指定为＆＃39; string＆＃39;。

Answer 1

app-component.html有一行像？

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