Angular2 ngClass 기능은

Question

를 예상대로 작동 나는 다음과 같은 코드

<a *ngFor="let slipStatus of slipStatuses; class="item striped" 
    [ngClass]="{ 
     'green background': slipStatus.status === 'SOLD', 
     'yellow background': slipStatus.status === 'IN PROGRESS', 
     'blue background': slipStatus.status === 'DONE' 
    }"> 

내가 표현 중 하나에 해당하면, 두 클래스가 추가됩니다 것이라는 기대를 가지고있다.하지 그러나 '배경'클래스는 마지막 ngClass 규칙에만 추가됩니다.

SOLD 전표에는 green 클래스 만 있고 IN PROGRESS 클래스에는 yellow 클래스 만 있고 DONE 전표에는 정확하게 두 클래스 blue background이 있습니다.

여기 무슨 일 이니?

Answer 1

plunkr이나 예제를 제공 할 수 있으면 좋겠지 만 표현식 중 하나라도 true이면 스타일이 적용됩니다.

문제가 CSS 파일과 관련이있을 수 있습니다. 당신이 flat css class heirarchy를 가지고 있다고 가정한다면, 나중에 정의 된 클래스들은 더 높은 특이성을 가질 것이고 다른 클래스들에 적용될 것임을 기억하십시오. 아마도 "녹색"및 "황색"스타일은 "배경"클래스의 일부 속성을 무시할 수 있습니다.

그래도 문제가 해결되지 않으면 NgClass 개체의 속성을 이동할 때 어떻게됩니까? 예 : 다음과 같이 :

<a *ngFor="let slipStatus of slipStatuses; class="item striped" 
    [ngClass]="{ 
     'blue background': slipStatus.status === 'DONE' 
     'green background': slipStatus.status === 'SOLD', 
     'yellow background': slipStatus.status === 'IN PROGRESS', 
    }">