J'essaie d'utiliser deux colonnes de grille différentes liées à ng-class avec la condition if-else. Je suis incapable de le faire correctement. Quelqu'un peut-il guider où je fais du mal. merci.
HTML
<div ng-class="{'col-md-11': test1 === null, 'col-md-6' : test1 !== null}" *ngIf="(test !== null)">
<div>
<div ng-class="{'col-md-11': test === null, 'col-md-6' : test !== null}" *ngIf="(test1 !== null)">
<div>
4 Réponses :
Vous pouvez utiliser quelque chose comme le code ci-dessous.
[ngClass] = "{'highlight': expression}"
la mise en évidence est le nom de la classe qui doit être appliqué lorsque l'expression renvoie une valeur booléenne. L'expression peut également être une fonction. Le point principal à retenir est que vous devez obtenir une valeur de type booléen.
[ngClass] = "{'highlight': expression, 'highlight1': expression}"
Si vous voulez une condition else, vous pouvez ajouter une classe supplémentaire et exécuter la même expression. Donc, quel que soit le cas, il appliquera cette classe.
Pour plus de détails, vous pouvez toujours visiter le site Web d'ANGULAR IO. Il vous fournira toutes les réponses.
Vous pouvez utiliser [class] au lieu de ngClass.
<div [class.col-md-11]="test1 === null" [class.col-md-6]="test1 !== null" *ngIf="test !== null"></div> <div [class.col-md-11]="test === null" [class.col-md-6]="test !== null" *ngIf="test !== null"></div>
Je ne savais pas que tu pouvais faire ça. C'est très bien pour les problèmes d'erreur / vérification. La méthode ngClass crée du code JSONesque Spaghetti à l'intérieur du Html.
Vous pouvez utiliser directement la condition ternaire pour ngClass
<div [ngClass]="test1 ? 'col-md-6' : 'col-md-11'" *ngIf="(test !== null)"> <div>
Vous pouvez inclure la condition comme ci-dessous dans ngClass.
<div [ngClass]="{'col-md-11': test1 === null, 'col-md-6' : test1 !== null}">
<div>
Ici, col-md-11 ne sera ajouté que si la valeur de test est nulle et col-md-6 sera ajouté si test1 n'est pas nul
Veuillez lire ceci: angular.io/api/common/NgClass
Est-ce que cela répond à votre question? Angular: classe conditionnelle avec * ngClass
un autre: stackoverflow.com/questions/63008176/…