Question

我有一个英雄按钮列表，其中包含在button.component.ts中创建的自定义动画。一开始，他们不活跃。当我按下其中一个时，所选的一个应该变为活动状态。为此，我在hero.ts中创建了一个名为state的字段和一个名为toggleState()的函数，我在其中更改了状态。但是当我按下按钮时，我收到错误：

EXCEPTION：http://localhost:3000/app/button.component.js类中的错误ButtonComponent - 内联模板：4：10由：self.context引起。$ implicit.toggleState不是函数

我的猜测是我不能像我在这里那样创建自定义方法。但我是Angular2中的新手，所以我无法说出来。我做错了什么？我玩够了＃34;哪里有Wally？＆＃34;用我的代码仍然无法找到任何东西。

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 1

如果将JSON强制转换为TypeScript类，那么所有发生的事情都是指示静态分析它可以安全地假设该值属于该类;实际上并没有改变JSON值（即它不会使它成为该类的实例）。

您想要的可能是How do I cast a JSON object to a typescript class或Cast JSON object to TypeScript class instance

Answer 2

您的服务很可能只返回普通对象，这意味着它们没有Hero类的成员方法。

您需要显式创建new Hero()个对象，才能在toggleState()对象上使用hero方法。

自定义创建的方法错误：＆＃34;不是函数＆＃34;

2 个答案: