Question

在本教程中，我到了要点，即创建了mock-heroes.ts（HEROES中的一组英雄对象）；到那时为止的一切都可行。我在*ngFor元素中添加了<li>指令，但该应用程序未显示英雄列表。

如果我取出*ngFor并放入一个'vanilla'<li>元素（例如<li>New item</li>），则会得到一个列表元素（“ New item”）。如果我在<ul>...</ul>元素后面添加html，则会显示出来。

heroes.component.html：

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

mock-heroes.ts：

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' }
];

hero.ts：

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

heroes.component.ts

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {
   heroes = HEROES;
  constructor() { }
  ngOnInit() { }
}

我希望看到：

   Tour of Heroes!
     My Heroes
   11 Mr. Nice
   12 Narco
   ...

我得到前两行，但没有英雄列表。控制台显示没有错误。

目录结构：

src
   app
      files: app.module.ts, app.component.*, hero.ts, mock-heroes.ts
      heroes
         files: heroes.component.*

Answer 1

我不知道发生了什么，但是我停了下来然后启动了服务器……事情开始起作用。我猜我已经解决了一些错误，但是问题很基本，服务器需要重新启动。

感谢各种想法！

英雄之旅教程-好像* ng

1 个答案: