Блог

Я выполнил шаги точно так, как описано в руководстве angular ‘Tour of Heroes’. Я не зашел слишком далеко, так как после добавления компонента функции «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

Кто-нибудь сталкивался с этим или я упускаю что-то супер очевидное?