angular - 无法绑定(bind)到 'hero'，因为它不是 'app-hero-detail' 的已知属性

Question

我被卡住了on the third step of the Angular tour of heroes tutorial ，上次我检查时，在 Angular 2 和 4 中，这个解决方案有效。从那以后发生了什么变化？

这是我在浏览器控制台中遇到的错误的屏幕截图。

这是一个 link to my repo on Github.

在 HeroDetailComponent 中，我得到了这个。

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

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

  constructor() {}

  ngOnInit() {}
}

hero-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>

在heroes.component.ts

中

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes = HEROES;
  selectedHero: Hero;

  constructor() {}

  ngOnInit() {}

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

在模板文件中 -

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

我怎样才能进入下一步？

Answer 1

而不是使用

<input [(ngModel)]="hero.name" placeholder="name" />

尝试使用

<input [value]="hero?.name" placeholder="name" />

更新 -

您还需要在 app.module 文件中添加您的详细信息组件，如下所示 -

@NgModule({
  declarations: [AppComponent, HeroesComponent, HeroDetailComponent],   <-- changes here
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})