无法调用从模板传递的对象上的方法

Question

我修改了angular2网站上的一个原始示例来演示问题：

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

我在tile的click事件中传递一个Hero对象并尝试调用该对象的.speak（）方法，但随后抛出错误 - hero.speak不是函数。

{{1}}

调试时我发现该对象上没有方法，只有它的属性

所以，我的问题是，是否可以访问这样的对象方法，以及正确的方法。

Answer 1

问题是public heroes: Hero[] = [];中此列表app/dashboard.component.ts中的英雄是从app/mock-heroes.ts通过app/hero.service.ts填充的。

当您查看app/mock-heroes.ts内部时，您会注意到它们只是普通的JS对象，这就是为什么它们没有speak()方法。

要实现目标，您需要修改app/mock-heroes.ts以返回new Hero();的列表，并修改app/Hero.ts构造函数以接受id和{{1作为参数。

OR

根据name中的列表修改app/hero.service.ts以创建new Hero();对象实例列表。

我希望这会使你朝着正确的方向前进。