FontAwesome Caret Down erscheint nicht in ngClass

Question

Ich habe ein seltsames Problem, wo ich die Fontawesome Caret auf und ab beim Sortieren des Feldes zeigen muss.Aber nur die Fa-Caret-up wird angezeigt, aber nicht fa-caret-down. Ich verwende den folgenden Code.

HTML

<th (click)="sort('ref')">Ref {{reverse}} 
    <span *ngIf="sortKey=='ref'" ><i [ngClass]="{'fa fa-caret-down':reverse,'fa fa-caret-up':!reverse}" ></i></span> 
</th> 

TS

 sortKey:string = ""; 
    reverse:boolean = true; 

    sort(field){ 
    this.sortKey = field; 
    this.reverse = !this.reverse; 

    } 

auf der HTML-Inspizieren erzeugt Ich beobachte, dass fa verketteten nicht, wenn fa-Caret-down.but es verketteten ist, wenn fa-caret- wird angezeigt. Ist das ein Bug in Angular 4?

Ich habe auch versucht, die Klasse = "fa" vor es ohne Unterschied zu verketten. Bitte klar.

Answer 1

Es ist seltsam, wenn Gegenteil ist wahr, entfernt es Fa-Klasse von Fa-Caret-Down.

Dies funktioniert,

<span><i class="fa" [ngClass]="{'fa-caret-down':reverse,'fa-caret-up':!reverse}" ></i></span> 

edit: verwenden, können Sie auch

<span><i [ngClass]="reverse ? 'fa fa-caret-down': 'fa fa-caret-up'" ></i></span>