angular中“*ngFor”报错？

Question

在按照angular官网上的英雄教程操作的时候遇到了问题：
双花括号里面的值未被正常渲染，查看控制台发现在<li *ngFor="let hero of heroes">行有报错，代码如下：

import {Component} from '@angular/core';

export class Hero {
  id: number;
  name: string;
}
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' }
]
@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="let hero of heroes">
        <span class="badge">{{hero.id}}</span>{{hero.name}}
      </li>
    </ul>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
  `
})
export class AppComponent {
  title = 'Tour of Heros';
  heroes = HEROES;
}

Answer 1

试试先把input的ngModel去掉呢，有可能是这里没有找到hero.name