Question

我在角度教程“英雄之旅”方面一直进展顺利，直到在使用angular的重复指令* ngFor时无法显示我的英雄列表为止。使用npm -v6.4.1和节点-v8.12.0。该代码与本教程中的代码完全相同。

我在src / app文件夹中的自己文件中创建了一个Hero类，并为其提供了id和name属性。

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

该文件位于src / app /文件夹中，名为mock-heroes.ts，将HEROES常量定义为包含十个英雄的数组，并将其导出。

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类文件，并导入了模拟的HEROES，如下所示

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

在同一文件（HeroesComponent类）中，我定义了一个名为heros的组件属性，以暴露HEROES数组进行绑定，如下所示。

export class HeroesComponent implements OnInit {

heroes = HEROES;

我通过修改

标记，在heroes.component.html文件中用* ngFor列出了英雄。

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

这里是角度页面上的教程链接。https://angular.io/tutorial/toh-pt2。请记住，该列表不会显示在浏览器中，并且我在控制台中没有任何错误。我正在使用npm -v6.4.1和节点-v8.12.0

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>

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

2 个答案: