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