我是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>
答案 0 :(得分:3)
这意味着缺少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';