*ngFor 不显示任何内容答案

【问题标题】：*ngFor don't show anything*ngFor 不显示任何内容
【发布时间】：2019-11-11 00:49:48
【问题描述】：

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

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

【问题讨论】：

缺少结尾" 这里"let hero of heroes + ts 文件中的heroes 在哪里？
hero = HEROES => heroes = HEROES;
#Silvermind，谢谢，它有效。我现在了解角度模板的原理。 #Prashant Pimpale 它已经完成了，但是我手动输入了这段代码并忘记了这句话，但是谢谢
@Tsiresgrammeur，请考虑删除此问题，因为这是一个简单的印刷问题，否则将作为 off-topic 关闭
#SiddAjmera，我想要，但如果我删除它，我将无法提问。删除前的“确认”中说的。

标签： angular ngfor

【解决方案1】：

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() {
}

【讨论】：

谢谢，只需将 hero = HEROES 更改为 heros = HEROES。

【解决方案2】：

heroes.component.ts

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

heroes.component.html

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

【讨论】：

这两种解决方案的唯一区别是语法吗？