* ngДля ничего не показывать - PullRequest
Новая
       5

* ngДля ничего не показывать

0 голосов
/ 29 июня 2019

У меня проблема с моим кодом.Я пытаюсь использовать * 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>

Я не вижу, что не так с этими кодами.

Ответы [ 2 ]

0 голосов
/ 29 июня 2019

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() {
}
0 голосов
/ 29 июня 2019

heroes.component.ts 

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

heroes.component.html 

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