1
votes

Mélanger plusieurs conditions dans une seule balise NgStyle?

J'ai une balise NgStyle et je souhaite utiliser plusieurs conditions, mais soit cela ne fonctionne pas, soit je reçois des erreurs.

Pour l'instant, voici mon code:

 <div class = "card" [ngStyle]="{'height': Card.duration.Hours == 1 ? '130px': height}"
                      [ngStyle]="{'height': Card.duration.Hours < 1 ? '100px': height}"
  >


7 commentaires

Utilisez-vous plusieurs propriétés [ngStyle] dans une seule balise html. pouvez-vous publier votre code html complet?


Voir ma réponse et laissez-moi savoir si cela a fonctionné pour vous?


Alors de quoi avez-vous besoin?


cela ne fonctionne que pour une seule condition, mais lorsque j'ajoute quelque chose comme ceci:

il les montre tous à la même taille


il en va de même pour


@SudarshanaDayananda ça remplace juste


Bonjour et bienvenue sur Stack Overflow @Dorian, comme vous pouvez le voir, il y a maintenant quelques réponses. Veuillez choisir la meilleure solution qui a résolu votre problème et marquez-la comme la bonne réponse, ou comme réponse aux réponses, si personne ne résout votre problème. Pour en savoir plus sur le fonctionnement de Stack Overflow, faites la visite guidée . :)


3 Réponses :


0
votes

Essayez ceci

[ngStyle] = "{'height': ((Card.duration.Hours == 1)? '130px': height)}"


1 commentaires

Essaye ça. Cela devrait fonctionner [ngStyle] = "{'height': (Card.duration.Hours == 1)? '130px': ((Card.duration.Hours <1)? '100px': height)}"



0
votes

Est-ce que cela fonctionne:

[ngStyle]="{'height': Card.duration.Hours == 1 ? '130px': ( Card.duration.Hours < 1 ? 100px : height)}"


0 commentaires

3
votes

Vous ne pouvez pas utiliser plusieurs [ngStyle] dans une seule balise div . utilisez plutôt [ngClass] . Voici mon exemple d'exemple.

HTML

.height100 {
  height: 100px;
  background: red;
}

.height200 {
  height: 200px;
  background: yellow;
}

.height300 {
  height: 300px;
  background: green;
}

TS

export class AppComponent  {

  hours: number = 3;

  constructor () {

  }
}


0 commentaires