时间戳

首页 > 解决方案 > *ngFor 不显示任何内容

angular - *ngFor 不显示任何内容

问题描述

我的代码有问题。我尝试使用 *ngFor 来显示一些数据，但我不知道我的代码有什么问题。这是它：在 src/app/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' }
];

在我的 src/heroes/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 {
   hero = HEROES;
   selectedHero: Hero;

 constructor() { }

 ngOnInit() {
}

}

在 src/heroes/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>

我没有发现这些代码有什么问题。

标签： angularngfor

解决方案

hero.component.ts

export class HeroesComponent implements OnInit {
   heroes : Hero = HEROES;

hero.component.html

<li *ngFor="let hero of heroes">

推荐阅读