Angular2 belebte funktioniert nicht mit 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')) 
    ]) 
    ] 
}) 

Makeln Staat Methode

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

Allerdings, wenn ich * entfernen ngIf ng2-animation arbeiten.

Theoretisch überprüft ngIf und ob es wahr ist. Das Element wäre im DOM verfügbar. Nach meinem Verständnis sollte das Element auch den Status inaktiv haben, da es nicht ausgelöst wurde. Nachdem Sie auf den Auslöser geklickt haben, ist das Element verfügbar und hat den Status "Aktiv".

Aber warum hat es keine Animation?

Gibt es irgendeine Arbeit, die mich erlaubt, ngIf und Animation zu verwenden?

Answer 1

Es sollte mit dieser Arbeit,

toggleState(){ 

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

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

} 

Wenn es nicht (Umgehung) funktioniert

toggleState(){ 

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

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

}