自定义创建的方法错误:“不是函数"； [英] custom created method error: "is not a function"

问题描述

我有一个英雄按钮列表，其中包含在button.component.ts中创建的自定义动画.最初，它们是不活动的.当我按其中之一时，所选的应该会激活.为此，我在hero.ts中创建了一个名为state的字段，并创建了一个名为toggleState()的函数来更改状态.但是当我按下按钮时，我收到错误消息:

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:

例外: http://localhost:3000/app/button.component.js 类ButtonComponent-内联模板:4:10由以下原因引起:self.context.$ implicit.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的新手，所以我真的不能说出来.我做错什么了?我玩了足够的沃利在哪里?"与我的代码，但我仍然找不到任何东西.

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:

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

推荐答案

如果将JSON转换为TypeScript类，则所有发生的事情是您向静态分析表明它可以安全地假定该值属于该类.实际上根本不会更改JSON值(即，它不会使其成为该类的实例).

If you cast JSON to a TypeScript class, all is happening is that you indicate to the static analysis it can safely assume the value is of that class; that doesn't actually change the JSON value at all (i.e it doesn't make it an instance of that class).

您想要的可能是如何做我将JSON对象转换为Typescript类或将JSON对象转换为TypeScript类实例

这篇关于自定义创建的方法错误:“不是函数"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！