Ich habe eine Liste von Heldentasten mit einer benutzerdefinierten Animation, die in @ erstellt wurdbutton.component.ts. Zu Beginn sind sie inaktiv. Wenn ich dann eine drücke, sollte die ausgewählte aktiv werden. Dazu habe ich ein Feld in @ angelehero.ts namensstate und eine Funktion namenstoggleState() wo ich den Zustand ändere. Aber wenn ich den Knopf drücke, erhalte ich die Fehlermeldung:

EXCEPTION: Fehler inhttp: // localhost: 3000 / app / button.component.js class ButtonComponent - Inline-Vorlage: 4: 10 verursacht durch: self.context. $ implicit.toggleState ist keine Funktion

Meine Vermutung ist, dass ich keine benutzerdefinierte Methode wie hier erstellen kann. Aber ich bin neu in Angular2 und kann es nicht wirklich sagen. Was habe ich falsch gemacht? Ich habe genug "Where's Wally?" mit meinem Code und ich kann immer noch nichts finden.

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');
    }
}