angular - Angular Tour Of Heroes 输入属性“不是已知属性”错误

Question

我完全按照角度“英雄之旅”教程中描述的步骤进行操作。我没有走得太远，因为在添加了“heroe-detail”功能组件后，我遇到了以下错误：

fail: Microsoft.AspNetCore.SpaServices[0]
      src/app/heroes/heroes.component.html:12:18 - error NG8002: Can't bind to 'hero' since it isn't a known property of 'app-hero-detail'.

从“heroes.component.html”中删除此功能组件会使应用程序恢复工作状态。这是我添加的功能组件：

<h2>My Heroes</h2>

<ul class="heroes">
  <li
      *ngFor="let hero of heroes"
      (click)="onSelect(hero)"
      [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

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

我的'heroe-detail.component.html'：

<div *ngIf="hero">

  <h2>{{hero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>
      name:
      <input [(ngModel)]="hero.name" placeholder="name" />
    </label>
  </div>

</div>

我的'heroe-detail.component.ts'：

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

@Component({
  selector: 'app-heroe-detail',
  templateUrl: './heroe-detail.component.html',
  styleUrls: ['./heroe-detail.component.scss']
})
export class HeroeDetailComponent implements OnInit {

  @Input() hero: Hero | undefined;

  constructor() {
  }

  ngOnInit(): void {
  }

}

我的“app.module.ts”：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroeDetailComponent } from './heroe-detail/heroe-detail.component';

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

我的'main.ts'：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

这是GitHub 上处于损坏状态的应用程序源

有没有人遇到过这个，或者我错过了一些非常明显的东西？