J'essaie de mettre en œuvre [ngClass] en fonction de différentes conditions, voici mon
condition
[ngClass]="{'validator':lang.VideoURL!=null, 'labeltitle': lang.VideoURL==null}"
mais lorsque la valeur de lang.VideoURL est nulle, alors labeltitle La classe ne s'applique pas sur la page et par défaut la classe de validation s'applique lorsque la valeur de lang.VideoURL est nulle
4 Réponses :
Essayez:
[ngClass]="lang.VideoURL ? 'validator' : 'labeltitle'"
La réponse de
@ porgo est également correcte, mais si vous avez d'autres conditions à vérifier, vous pouvez essayer comme ceci.
[ngClass]="[lang.VideoURL != null: 'validator', lang.VideoURL == null: 'labeltitle']"
Une autre option est la liaison de propriété de classe présentée ici https://angular.io/guide / template-syntax # binding-target . Ceci est utile si vous avez plusieurs classes qui peuvent être valides à la fois mais qui sont toutes conditionnelles.
[class.validator]="lang.VideoURL" [class.labeltitle]="!lang.VideoURL"
OMI, c'est la meilleure façon de le faire. C'est beaucoup plus clair et vous n'avez qu'un seul morceau de logique par nom de classe et attribut angulaire
oui, c'est définitivement ma manière préférée, puisque je travaille dans une équipe, je veux que les choses soient instantanément comprises par quiconque lit le code. C'est le moyen le plus direct à mon humble avis.
c'est la manière d'utiliser les conditions multiples ngClass.
[ngClass]="{'first-class': condition1,'second-class': condition2}"
essayez ceci:
[ngClass] = "{'validator': lang.VideoURL, 'labeltitle':! lang.VideoURL}"Pour votre information, je suppose que votre logique dans la condition est en fait correcte, mais que votre valeur de lang.VideoURL n'est pas nulle mais est probablement indéfinie, ce qui provoquerait le comportement que vous expliquez ci-dessus. C'est aussi la raison pour laquelle les réponses suggérées fonctionnent, car elles ne sont pas concernées par null ou undefined, et sont plutôt axées sur false ou true (nul et non défini seront considérés comme faux, donc l'un ou l'autre fonctionne alors)