SovietPanda SovietPanda - 1 month ago 5
TypeScript Question

custom created method error: "is not a function"

I have a list of hero-buttons with a custom animation created in

button.component.ts
. At the beginning, they are inactive. When I press one of then, the selected one should turn active. For this, I created a field in
hero.ts
called
state
and a function called
toggleState()
where I change the state. But when I press the button, I receive the error:


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


My guess is that I can't create a custom method like I did here. But I'm new in Angular2 so I can't really tell it. What did I do wrong? I played enough "Where's Wally?" with my code and still I can't find anything.

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

Answer

If you cast JSON to a TypeScript class, all is happening is that you indicat to the static analysis it can safely assume the value being of that class, that doesn't actually change the JSON value at all and also doesn't make it an instance of that class.

What you want is probably How do I cast a JSON object to a typescript class or Cast JSON object to TypeScript class instance