Angular2アニメーション[@triggerName]が* ngForで動作しない

Question

基本的には、条件が満たされたときに特定のボックスにアニメーションを適用できるようにします。私のアプリでは、これは、ユーザが質問1（Component1の場合） - >共有サービス - > COmponent2で回答を得たときに発生する必要があります。これについて通知を受け、答えが正しい場合はid = 1 （私はちょうどボックスの特異性の重要性を指摘するためにIDを使用しました）

*ngForで値が機能していませんが値が存在します。

私はこれを行う場合は、次のボックスにng.probe($0)._debugInfo._view.changeDetectorRef._viewを、私は、この（_expr_3が見えた値である）が得られる：

を...

_el_0：DIV＃1 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> 

何を私

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

第2のハードコード要素は、それらのanimate1とanimate2変数とうまく動作しますが、*ngForで生成された他の2つは、動作していないされていますので、結果がどうあるべきで追加することですngfor [@boxScale]の正しい値やろうまったく。

私はここで間違っていますか？

Answer 1

Plunker次のコードが意味をなさない場合は、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; 
}