カスタム作成されたメソッドエラー：「関数ではありません」

button.component.tsで作成されたカスタムアニメーションのヒーローボタンのリストがあります。最初は、活動していません。そのうちの1つを押すと、選択したものが有効になります。このために、stateというフィールドをhero.tsというフィールドに作成し、toggleState()という名前の関数を使用して状態を変更しました。私はボタンを押したときしかし、私はエラーが表示されます。カスタム作成されたメソッドエラー：「関数ではありません」

EXCEPTION: Error in http://localhost:3000/app/button.component.js class ButtonComponent - inline template:4:10 caused by: self.context.$implicit.toggleState is not a function

私の推測では、私がここで行ったように私は、カスタムメソッドを作成することができないということです。しかし、私はAngular2で新しく、実際にはそれを伝えることはできません。私は何を間違えたのですか？私は十分な "Where's Wally？"私のコードではまだ何かを見つけることができません。

button.component.ts：

import { Component, Input, OnInit, trigger, state, style, transition, animate 
} from '@angular/core'; 

import { Hero } from './hero'; 
import { HeroService } from './hero.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'button-collection', 
    template: ` 
     <button *ngFor="let hero of heroes" 
      [@heroState]="hero.state" 
      (click)="hero.toggleState()"> 
     {{hero.name}} 
     </button> 
    `, 
    styleUrls: ['heroes.component.css'], 
    animations: [ 
     trigger('heroState', [ 
      state('inactive', style({ 
       backgroundColor: '#e1e1e1', 
       transform: 'scale(1)' 
      })), 
      state('active', style({ 
       backgroundColor: '#dd1600', 
       transform: 'scale(1.1)' 
      })), 
      transition('inactive => active', animate('100ms ease-in')), 
      transition('active => inactive', animate('100ms ease-out')) 
     ]) 
    ], 
}) 
export class ButtonComponent implements OnInit { 
    heroes: Hero[]; 

    constructor(private heroService: HeroService) { 

    } 

    ngOnInit(): void { 
     this.heroService.getHeroes() 
     .then(heroes => this.heroes = heroes); 
    } 
}

hero.ts：

export class Hero { 
    id: number; 
    name: string; 
    state: string; 

    constructor() { 
     this.state = 'inactive'; 
    } 

    public toggleState(): void{ 
     this.state = (this.state === 'active' ? 'inactive' : 'active'); 
    } 
}

出典

2016-11-01 SovietPanda

あなたはあまりにも多くのコードを削除したと思います。 'クラスヒーロー 'とは何ですか？コンポーネント、サービス、その他何か？ "そんなこと"とは何ですか？それは 'ヒーロー'リファレンスを含んでいますか？ –

@GünterZöchbauer：短い説明：クラス 'hero.ts'は私がヒーローリスト（Hero []）に使用するモデルです。 '// and so on'にはフィールドheroesとヒーローのリストを取得するメソッドがあります。私はあなたのためにそれを追加します。 – SovietPanda

あなたは 'getHeroes（）'のJSONを 'Hero'にキャストしていませんか？ –