Angular2 动画 [@triggerName] 在 *ngFor 中不起作用

Question

基本上，我希望能够在满足条件时将动画应用到特定框。在我的应用程序中，当用户给出问题 1 的答案（在 Component1 中）-> 通过共享服务 -> 在 COMponent2 中，我会收到有关它的通知，如果答案正确，我将使用 id=1 缩放框（我用 id 只是为了指出盒子的特殊性的重要性）

*ngFor 添加的 [@triggerName] = "my_value_from_expression" 值无效，但该值存在；

如果我这样做：ng.probe($0)._debugInfo._view.changeDetectorRef._view 在盒子上，给我这个（_expr_3 是看起来的值）：

...

_el_0:div#1.box

_expr_2:"1"

_expr_3:"animate1"

_expr_4:"Box1"

...

所以我有这个：

frame.component.ts

@Component({
selector: 'app-frame',
templateUrl: './frame.component.html',
styleUrls: ['./frame.component.css'],
animations:[ 
  trigger('boxScale',[
    state('true', style({
        transform: 'scale(1.2)',
      })),
    state('false', style({
    transform: 'scale(1)',
  })), 
  transition('false => true', animate('100ms ease-in')),
    transition('true => false', animate('100ms ease-out')),
  ]),]
})
export class FrameComponent implements OnInit {
  answ:string[];
  boxes: string[] = [];
  animate1:boolean = true;
  animate2:boolean = false;

constructor(private _commService: CommunicateService) { 
  this._commService.answerSource.subscribe((result:string[]) => {
    this.answ = result;
    this.animate(result)
})

  for(let i = 1; i <= 2; i++ ){
    this.boxes.push("animate"+i);
  }
}
animate(result){
 /***** result: ['q_id',corect_answ','user_answ'] *****/
  if(result[1] != undefined && result[1] === result[2]){
      this.animate1 = !this.animate1;
      this.animate2 = !this.animate2;
    }
  }
}

frame.component.html

<div class="boxes">
   <div class="box" [@boxScale]="animate1">Box_1</div>
   <div class="box" [@boxScale]="animate2">Box_2</div>
   <div *ngFor="let box of boxes; let i = index; " class="box" id="{{i+1}}" [@boxScale]="box">Box{{i+1}}</div>
</div>

我尝试使用 ngfor 为 [@boxScale] 添加正确的值，因此结果应该是：

<div class="boxes">
  <div class="box" [@boxScale]="animate1">Box_1</div>
  <div class="box" [@boxScale]="animate2">Box_2</div>
  <div class="box" id="1" [@boxScale]="animate1">Box1</div>
  <div class="box" id="2" [@boxScale]="animate2">Box2</div>
</div>

前两个硬编码元素适用于 animate1 和 animate2 变量，但其他两个使用 *ngFor 生成的元素根本不起作用。

我在这里做错了什么？

Answer 1

试试这样的如果下面的代码没有意义，请检查Plunker。

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

@Component({
  selector : 'ease-inout',
  animations: [
    trigger('boxScale',[
    state('true', style({
        transform: 'scale(1.2)',
      })),
    state('false', style({
    transform: 'scale(1)',
  })), 
  transition('false => true', animate('100ms ease-in')),
    transition('true => false', animate('100ms ease-out')),
  ])
  ],
  template: `

    <div class="boxes">
      <div class="box" [@boxScale]="animate1">Box_1</div>
      <div class="box" [@boxScale]="animate2">Box_2</div>
    <div *ngFor="let box of boxes; let i = index; " class="box" id="{{i+1}}" [@boxScale]="box">Box{{i+1}}</div>
</div>
  `
})
export class EaseInOutComponent implements OnChanges {
  boxes: boolean[] = [];
  animate1:boolean = true;
  animate2:boolean = false;

  constructor()
  {
    // just for example
    this.boxes.push(this.animate1);
    this.boxes.push(this.animate2);
    console.log(this.boxes) //[true, false]
  }

}

希望这会有所帮助..

Answer 2

@MMK - 请查看update

 <div>
    <button (click)="box1()">Toggle Box1</button>
    <button (click)="box2()">Toggle Box2</button>
</div>    
box1(){
  this.animate1 = !this.animate1;
}
box2(){
  this.animate2 = !this.animate2;
}