1
votes

Comment mettre if else imbriqué dans ngstyle en angular

Je souhaite appliquer une hauteur dynamique à ma table. donc pour cela j'ai écrit une fonction qui me donne la hauteur disponible à l'écran. et après cela, j'utilise cette hauteur pour ma table. supposons que je reçois une fonction de dispoHeight en tant que 440 px. J'ai quatre tables a, b, c, d et je peux développer et réduire la table maintenant je veux postuler -

[ngStyle]="{ 'height.px': expanded  ? availHeight : table === 'a' ?
                    (availHeight -150, 'width': 100 + '%') : (availHeight - 30, 'width': 100 + '%')}">

J'ai essayé d'écrire ceci comme -

ngStyle=> if expanded== true then height should be == availHeight for all four tables
and if expanded== false and table=='a' then height should be availHeight-150 else (for b,c,d)
height should be availHeight-30

Mais j'obtiens une erreur dans ceci. p>

Veuillez aider comment puis-je écrire ceci dans des conditions ternaires.

Merci d'avance

javascript angular

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser l'attribut de style en ligne séparément pour les deux

comme ceci:

[style.height.px]="expanded ? availHeight : table === 'a' ?  availHeight-150 : availHeight-30"
[style.width.%]="expanded ? 100 : 'initial'"

si développé est faux, la largeur «initiale» est ignorée.

0 commentaires

0
votes

Je pense que vous pouvez faire quelque chose comme ceci:

[ngStyle]="{
    'height': expanded ? availHeight
            : !expanded && table=='a'? availHeight - 30
            : defaultVal, //some default val
     'width': expanded ? '100%'
            : !expanded && table=='a'?  (100-10)+'%'
            : defaultVal, //some default val
  }"

0 commentaires

0
votes

Vous aurez beaucoup plus de facilité à faire ce type de logique dans votre composant et à exposer le style résultant au modèle html en tant que variable.

Ce n'est pratiquement jamais une bonne idée d'avoir une logique comme celle-ci directement dans le modèle.

0 commentaires