Question

我正在关注AngularJS 2的this part of the tutorial，但是当我尝试从列表中选择“hero”元素时，我收到的错误如下：

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

这是带有点击装订的模板的一部分：

<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

我假设heros是这样的对象，

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

是的，正如@eric在评论中所说，确保你的HTML文件由AppComponent加载，其次要确保你的打字稿文件正确编译。

Answer 2

您的方法onSelect()必须位于heroes.component.ts，并且工作正常。

export class HeroesComponent implements OnInit {

  heroes = HEROES;

  selectedHero: Hero;

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

}

在评估教程之后的“click”期间出现Angular 2错误

2 个答案: