ngClass는 Angular 2에서 3진 연산자를 사용할 수 있습니까?

ngClass는 Angular 2에서 3진 연산자를 사용할 수 있습니까?

Angular 1에서는 아래 코드가 잘 작동합니다.

<div ng-class="$varA === $varB ? 'css-class-1' : 'css-class-2'">

그런데 앵귤러 2에서 비슷한 걸 하려고 할 때.작동하지 않습니다.

이미 추가했습니다.directives: [NgClass]

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

Angular 2로 어떻게 써야 할까요, 감사합니다!

편집: 내 실수였어, 내가 실수로 추가했어요.{ }전체적으로varA === varB ? 'css-class-1' : 'css-class-2'SongClass는 Angular 2에서 3진 연산자를 계속 사용할 수 있습니다.

네, 당신이 쓴 것은 효과가 있습니다.

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

플런커

오른쪽 식의 결과는 다음 중 하나를 평가해야 합니다.

• 공백으로 구분된 CSS 클래스 이름 문자열(이것이 당신의 표현식이 반환하는 것입니다)
• CSS 클래스 이름 배열
• CSS 클래스 이름을 키로 사용하고 부울을 값으로 사용하는 개체

코드에 다른 오류가 있는 것은 아닐까요?

<div [ngClass]="{'css-class-1':varA === varB, 'css-class-2': varA !== varB}">

https://angular.io/api/common/NgClass 도 참조하십시오.

다음을 시도할 수 있습니다...

3차 연산자의 경우:

[ngClass]="condition1==condition2?'class-1':'class-2'"

다중 조건의 경우:

[ngClass]="{'class-1':condition1==condition2, 'class-2': condition3==condition4}"

감사합니다...

다음을 시도할 수 있습니다.

<div class="css-class-3 css-class-4" [ngClass]="{'css-class-1': varA === varB, 'css-class-2': !(varA === varB)}">

이것은 나에게 효과가 있었습니다.

다음을 시도할 수 있습니다.

아마도 이 예는 더 명확하게 만들 것입니다.

<div [ngClass]="salesVolume <= 55_000 ? 'bg_green' : 'bg_red' " >

bg_green 및 bg_red는 사용자 스타일에 정의된 2개의 클래스 스타일입니다.

언급URL : https://stackoverflow.com/questions/35230541/can-ngclass-use-ternary-operator-in-angular-2