因为没有按预期工作

Question

如果我执行heroes[0].name或heroes[1].name，则以下代码有效，但如果我尝试使用ngFor代码，则以下代码无效：

import { Component } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'app-root',
  template: `
  <h1>{{heroes[1].name}}</h1>
  <p>Heroes:</p>
 <ul class="col-xs-12">
            <a href="" class="list-group-item clearfix" *ngFor="let hero of heroes"></a> 
            <li class="pull-left">
                <h4 class="list-group-item-heading"> {{ hero.name }} </h4>
                <p class="list-group-item-text"> {{ hero.description }} </p>
                <span class="pull-right">
                    <img src="{{ hero.imagePath }}" alt="" class="img-responsive" style="max-height: 50px">
                </span>
            </li>
        </ul>
`
})

export class AppComponent {
  title = 'All of Heroes';
  heroes: Hero[] =[
    new Hero('Hero 1', 'Test',
'https://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe_images/recipe-image-legacy-id--488691_11.jpg'),
    new Hero('Hero 2', 'Test',  'http://media3.sailusfood.com/wp-content/uploads/2016/03/veg-momos-recipe.jpg')
  ];
}

WebPage显示如下，尽管应该有2个<li>的名称，描述和图像：