ngClassがAngular 4の最初の条件のためにngFor内で動作していません

Question

条件付きで[ngClass]を使用してforループ内に別のアイコンを表示しようとしています。 2番目の状態では完全に正常に動作しますが、最初の状態では動作しません。

<i [ngClass]="{'fa fa-heart text-warning':z.isPinned == true,'fa fa-heart-o text-warning':z.isPinned == false}" (click)=addFavorite(z,i); aria-hidden="true"></i> 

環境：角度/ CLI - 1.5.0

Answer 1

常に==演算子、===を使用しないでください。

また、isPinnedに真実値があるかどうか確認しましたか？

最後に、あなたは三項演算子を使用するようにしてください'fa fa-heart text-warning': z.isPinned,'fa fa-heart-o text-warning': !z.isPinned

Answer 2

を簡素化することができます：

[ngClass]="z.isPinned ? 'fa fa-heart text-warning' : 'fa fa-heart-o text-warning'"