在Angular 6中找不到名称

Question

我是Angular 6的新手，并且正在关注Angular文档以及一个测试项目。一切正常，但是控制台出现错误，阻止我创建项目的构建。错误是

  

找不到名称“英雄”

下面是我的代码。任何帮助，将不胜感激。谢谢。

/* mock-heroes.ts */  

export const HEROES: Hero[] = [
  { id: 1, name: 'Alex'},
  { id: 2, name: 'John'},
  { id: 3, name: 'Albert'},
];

/* heroes.component.ts */

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

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

/* heroes.component.html */

<div>
  <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>
</div>

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

Answer 1

这意味着缺少Hero的类文件，您需要从定义的路径中添加import Hero

export const HEROES: Hero[] = [
  { id: 1, name: 'Alex'},
  { id: 2, name: 'John'},
  { id: 3, name: 'Albert'},
];

示例

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

并导入为，

import { Hero } from '../hero';