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

Question

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

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

我在图 block 的点击事件中传递了一个 Hero 对象，并试图调用该对象的 .speak() 方法，但随后抛出一个错误 - hero.speak 不是一个函数。

  sayHeroName(hero: Hero) {
    hero.speak();
  }

在调试时我发现那个对象没有方法，只有它的属性

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

Answer 1

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

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

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

或

修改 app/hero.service.ts 以创建 new Hero(); 对象实例列表，基于 app/mock- heroes.ts.

我希望这会把你推向正确的方向。