Angular2动画[@triggerName]不是* ngFor工作

Question

基本上我希望能够当满足条件，我的动画应用到特定的盒子。在我的应用程序这方面的需求，当用户给出了问题1（中的Component1）的答案，发生 - >通过共享服务 - >在COMPONENT2我得到通知一下，如果答案是正确的，我将扩展与ID = 1盒（我用id只是指出框的特殊性的重要性）

[@triggerName] = "my_value_from_expression"值不工作添加*ngFor但存在的价值;

如果我这样做：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; 
}