Angular – Hoe [ngStyle] voorwaarden toepassen

Ik heb een div die ik wil stylen op basis van een voorwaarde.

Als styleOne waar is, wil ik een rode achtergrondkleur. Als StyleTwo waar is, wil ik dat de achtergrondkleur blauw is. Ik heb de helft ervan werkend met de onderstaande code.

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

Is het mogelijk om een voorwaarde toe te voegen om te zeggen:

• als styleOne waar is, doe dit dan
• als styleTwo waar is, doe dit dan?

Bewerken

Ik denk dat ik het heb opgelost. Het werkt. Ik weet niet zeker of dit de beste manier is:

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

Antwoord 1, autoriteit 100%

Voor een enkel stijlkenmerk kunt u de volgende syntaxis gebruiken:

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

Ik nam aan dat de achtergrondkleur niet ingesteld zou moeten worden als noch style1noch style2trueis.

Aangezien de titel van de vraag ngStylevermeldt, is hier de equivalente syntaxis met die richtlijn:

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

Antwoord 2, autoriteit 23%

Je kunt een inline gebruiken als je binnen je ngStyle bent:

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

Een beslagmanier naar mijn mening is om uw achtergrondkleur in een variabele op te slaan en vervolgens de achtergrondkleur in te stellen als de variabele waarde:

[style.background-color]="myColorVaraible"

Antwoord 3, Autoriteit 15%

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

Antwoord 4, Autoriteit 3%

<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>

Antwoord 5

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