Question

我的代码有问题。我尝试使用* 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>

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

Answer 1

heroes.component.ts

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

heroes.component.html

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

Answer 2

TS文件

hero = HEROES;

html文件

<li *ngFor="let hero of heroes>

我认为这是一个错误的错别字，只有您必须做的是ts文件中的英雄，正确的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;
   selectedHero: Hero;

 constructor() { }

 ngOnInit() {
}

* ng不显示任何内容

2 个答案: