Angular2 одушевленные не работает с ngIf

Question

<div *ngIf="clientTable" [@clientTableState]="testAnimate.state" class="clientdata"> 
    <div class="table-holder"> 
    <table id="header-fixed"><a (click)="closeClientTable()" class="table-close"><i class="ion-close-circled"></i></a> 
     <tr> 
     <th colspan="8">{{ clientTableHeader }}</th> 
     </tr> 
     <tr> 
     <th rowspan="2">Bookie</th> 
     <th colspan="3">Payment</th> 
     <th colspan="3">Bookie</th> 
     <th rowspan="2">Balance</th> 
     </tr> 
    </table> 
    </div> 
</div> 

@Component({ 
    templateUrl: 'app/html-templates/bookiedata.html', 
    styleUrls: ['css/templates.css'], 
    animations: [ 
    trigger('clientTableState', [ 
     state('inactive', style({ 
      opacity: 0 
     })), 
     state('active', style({ 
      opacity: 1 
     })), 
     transition('inactive => active', animate('0.8s ease-in-out')), 
     transition('active => inactive', animate('0.8s ease-in-out')) 
    ]) 
    ] 
}) 

государственный метод Переключение

// declaration 
clientTable: boolean = false 
testAnimate: any = { state: 'inactive' } 

// method 
toggleState(){ 
    this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive' 
    this.clientTable = true 
} 

Однако, если я удалю * ngIf ng2-animation будет работать.

Теоретически, ngIf проверяет, и если это правда. Элемент будет доступен в DOM. Основываясь на моем понимании, элемент должен также иметь состояние неактивное, так как оно не запускалось. После нажатия триггера элемент будет доступен и будет иметь состояние active.

Но почему у него нет анимации?

Есть ли какая-нибудь работа вокруг, которая позволит мне использовать ngIf и анимацию?

Answer 1

Он должен работать с этим,

toggleState(){ 

    this.clientTable = true   //<<<===changed order. 

    this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive' 

} 

Если он не работает (обходной)

toggleState(){ 

    this.clientTable = true   //<<<===changed order. 

    setTimout(()=>{ 
     this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive' 
    },2000) 

}