按照教程评估 "click"期间出现 Angular 2 错误

Question

我正在关注 this part of the tutorial对于 AngularJS 2，但是当我尝试从列表中选择一个“英雄”元素时，我收到如下错误:

EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: l_context.onSelect is not a function

这是带有点击绑定(bind)的模板部分:

<ul class="heroes">
   <li *ngFor="#hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
</ul>

这是我定义 onSelect 函数的 AppComponent 类:

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(hero: Hero) { this.selectedHero = hero; }
}

我什至尝试完全复制教程中的代码，但仍然收到错误。怎么了？

Answer 1

你的代码对我来说工作正常这里是使用你的代码的 plunkr:

http://plnkr.co/edit/vbinFbGtB7oRoW8cJHwb?p=preview

我假设英雄是这样的对象，

heroes = [{'id':1,'name':'pardeep'}, {'id':2,'name':'jain'}];

是的，正如@eric 在评论中所说，确保您的 HTML 文件由 AppComponent 加载，其次确保您的 typescript 文件编译正确。