浏览器刷新后，将不会出现英雄列表

Question

我在角教程“英雄之旅”上一直进展顺利，直到我的英雄列表在使用角的重复指令*ngFor时没有显示出来。使用npm -v6.4.1和节点-v8.12.0。代码与本教程中的内容完全一致。

我在src/app文件夹中自己的文件中创建了一个Hero类，并给出了它的id和name属性。

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

这个名为模拟英雄的文件位于src/app/文件夹中，它将英雄常量定义为由十个英雄组成的数组并导出它。

import { Hero } from './hero';

export const HEROES: Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'},
];

我打开了HeroesComponent类文件并导入了模拟英雄，如下所示

import { HEROES } from '../mock-heroes';

在同一个文件(HeroesComponent类)中，我定义了一个名为英雄的组件属性，用于公开用于绑定的英雄数组，如下所示。

export class HeroesComponent implements OnInit {

heroes = HEROES;

我使用*ngFor列出了英雄，如下所示，在heroes.component.html文件中修改了

• 标签。

Answer 1

循环语句中有一个变量类型heros。

它应该是heroes而不是：

<h2>My Heroes</h2>
<ul class = "heroes">
  <li *ngFor="let hero of heroes">
    <span class = "badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

Answer 2

在你的.ts里

heros = HEROES;

在你的.html里

<h2>My Heroes</h2>
<ul class = "heroes">
  <li *ngFor="let hero of heros">
    <span class = "badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>