2016-11-24 6 views
0

diesen Code zu haben:Winkel 2 ngClass Bindung funktioniert nicht nach der Animation

<ul> 
    <li routerLinkActive="is-active"><a routerLink="/user/register"><span>registration</span></a></li> 
    <li routerLinkActive="is-active"><a routerLink="/user/login"><span>login</span></a></li> 
    <li role="menu" class="drop-down"> 
    <a class="drop-down--toggle" (click)="toggle()"> 
     <span class="flag-icon" [ngClass]="_currentLocale.flag"></span> 
    </a> 
    <ul [@stateAnimation]="dropDownState" (@stateAnimation.done)="dropDownAnimEnd($event)" class="drop-down--menu"> 
     <li *ngFor="let locale of _localeMenu" (click)="change(locale)"> 
     <a> 
      <span class="flag-icon" [ngClass]="locale.flag"></span> 
      <span>{{locale.name}}</span> 
     </a> 
     </li> 
    </ul> 
    </li> 
</ul> 

ich es geschafft, alles zu haben, außer dieser Linie arbeiten:

<span class="flag-icon" [ngClass]="_currentLocale.flag"></span> 

Wenn eine neue locale aus dem Drop-down ausgewählt Menü wird dann zuerst das Menü geschlossen und das Gebietsschema geändert. Danach wird das aktuelle Gebietsschema und Gebietsschema aktualisiert. Aber das aktuelle Gebietsschema-Flag wird nicht aktualisiert, bis ich das Menü erneut umschalte. In Safari scheint zu funktionieren, aber nicht in Chrome, Firefox und Opera. Mache ich hier etwas falsch? Jede Hilfe wäre willkommen.

Update: dies ist der LocaleModel:

export class LocaleModel { 
    id: number; 
    code: string; 
    name: string; 
    fileName: string; 
    flag: string; 

    constructor(id: number, code: string, name: string, fileName: string, flag: string) {} 
} 
+0

Was ist '_currentLocale.flag'? ist es ein Klassenname oder eine Variable? –

+0

_currentLocale.flag ist ein String -> "flag-icon-es" – emvidi

+0

Sorry, kann ich nicht sagen. Vielleicht mit einem Plunker zu reproduzieren. –

Antwort

1

Nachdem er 1 Stunde meines ersten Plunker Schaffung Ich war wie betäubt, um zu sehen, dass es wie vorgesehen funktioniert. Dann merke ich, dass die Vorlage, die ich in Plunker verwendete, die neueste Version von angular hatte, so dass ein einfaches npm-Update das Problem löste. Ich weiß immer noch nicht, warum die v2.1 nur in Safari funktionierte.

aktualisieren

Der Täter scheint this resolved animation bug zu sein, die die Bindung nach der Animation Ende zu aktualisieren ist fehlgeschlagen. Safari könnte funktionieren, weil es verwendet, da es nicht unterstützt Web Animations API, gefundene Informationen here.

Verwandte Themen