Angular 2动画 - 两个状态之间的转换不会触发

Question

我试图从Angular Documentation获取示例（特别是两个状态之间的转换部分）并且无法触发动画。我没有得到任何错误，也不明白我哪里出错了。任何指针都将不胜感激，谢谢。

这是我的代码：

HTML

<ul>
    <li *ngFor="let hero of heroes"
        [@heroState]="hero.state"
        (click)="toggleState()">
      {{hero.name}} - {{hero.state}}
    </li>
</ul>

TS

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

@Component({
  selector: 'app-coating',
  templateUrl: './coating.component.html',
  styleUrls: ['./coating.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
})

export class CoatingComponent implements OnInit{

  state:string;
  toggle: boolean = true;
  name: string;

  toggleState() {
    console.log('Test');
    this.toggle = !this.toggle;
    console.log(this.toggle);
    this.state = this.toggle ? 'inactive':'active';
  }

  heroes = [
    { id: 11, name: 'Mr. Nice', state: 'inactive' },
    { id: 12, name: 'Narco', state: 'active'  },
    { id: 13, name: 'Bombasto', state: 'inactive'  },
    { id: 14, name: 'Celeritas', state: 'active'  },
    { id: 15, name: 'Magneta' },
    { id: 16, name: 'RubberMan' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }
  ];

  constructor() {

  }

  ngOnInit(){}

}

同样对于console.log，当我点击第一个英雄时，我得到： 测试 真正 非活性

Answer 1

问题

toggleState()需要传回某些内容来指示哪个英雄的状态要切换。

我在index正文中添加*ngFor，并使用索引（i）作为参数。

HTML

<ul>
    <li *ngFor="let hero of heroes; let i = index"
        [@heroState]="hero.state"
        (click)="toggleState(i)">
      {{hero.id}} - {{hero.name}} - {{hero.state}}
    </li>
</ul>

TS

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active', style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
})
export class AppComponent implements OnInit {

  state: string; // not used
  toggle: boolean = true; // not used
  name: string; // not used

  heroes = [
    { id: 11, name: 'Mr. Nice', state: 'inactive' },
    { id: 12, name: 'Narco', state: 'active' },
    { id: 13, name: 'Bombasto', state: 'inactive' },
    { id: 14, name: 'Celeritas', state: 'active' },
    { id: 15, name: 'Magneta', state: 'active' },
    { id: 16, name: 'RubberMan', state: 'active' },
    { id: 17, name: 'Dynama', state: 'active' },
    { id: 18, name: 'Dr IQ', state: 'active' },
    { id: 19, name: 'Magma', state: 'active' },
    { id: 20, name: 'Tornado', state: 'active' }
  ];

  constructor() { }

  ngOnInit() { }

  toggleState(i) {
    console.log(this.heroes[i].name, this.heroes[i].state);
    this.heroes[i].state = (this.heroes[i].state === 'active' ? 'inactive' : 'active');
    console.log(this.heroes[i].name, this.heroes[i].state);
  }

}