각도 - [ngStyle] 조건 적용 방법

각도 - [ngStyle] 조건 적용 방법

저는 조건에 따라 스타일링하고 싶은 디브가 있습니다.

style1이 사실이라면 저는 빨간색 바탕색을 원합니다.Style Two가 사실이라면 배경색은 파란색으로 하고 싶습니다.저는 아래 코드로 절반을 작업하고 있습니다.

    <div id="myDiv" [ngStyle]="styleOne && {'background-color': 'red'}">

다음과 같은 조건을 추가할 수 있습니까?

• styleOne이 참인 경우 이 작업을 수행합니다.
• 만약 스타일2가 사실이라면, 이것을 하겠습니까?

편집

제가 해결한 것 같습니다.그건 효과가 있다.이것이 최선의 방법인지 확실하지 않습니다.

<div id="div" [ngStyle]="styleOne && {'background-color': 'red'} || styleTwo && {'background-color': 'blue'}">

단일 스타일 특성의 경우 다음 구문을 사용할 수 있습니다.

<div [style.background-color]="style1 ? 'red' : (style2 ? 'blue' : null)">

배경색이 설정되지 않은 경우 배경색이 설정되지 않아야 한다고 가정했습니다.style1도 아니다style2이라true.

---

질문 제목이 언급된 이후로ngStyle다음은 해당 지시문과 동일한 구문입니다.

<div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }">

ngStyle 내부에 있는 경우 인라인을 사용할 수 있습니다.

[ngStyle]="styleOne?{'background-color': 'red'} : {'background-color': 'blue'}"

더 나은 방법은 배경색을 변수 안에 저장한 다음 배경색을 변수 값으로 설정하는 것입니다.

[style.background-color]="myColorVaraible"

[ngStyle]="{'opacity': is_mail_sent ? '0.5' : '1' }"

<ion-col size="12">
  <ion-card class="box-shadow ion-text-center background-size"
  *ngIf="data != null"
  [ngStyle]="{'background-image': 'url(' + data.headerImage + ')'}">

  </ion-card>

[ngStyle]="{ 'top': yourVar === true ? widthColumHalf + 'px': '302px' }"

언급URL : https://stackoverflow.com/questions/49280975/angular-how-to-apply-ngstyle-conditions