Ci-dessous est mon code HTML, je souhaite modifier la couleur de réseau NAMELIST en cliquant sur cet indice de tableau particulier, exemple si je clique sur namelist [1] code>
Seuls cet élément Couleur de fond Changement de couleur en vert, à nouveau si je clique sur namelist [2] code> puis namelist [1] code> Changement d'arrière-plan en blanc et Namelist [2] Code> Modifier en vert, comment résoudre ce problème en angulaire 6.
<div>
<ul *ngFor="let name of NameList">
<tr>
<td class="" (click)="nameDetail(name)">{{name}}</td>
</tr>
</ul>
</div>
4 Réponses :
Vous pouvez utiliser conditionnellement ngclass Voici le lien de référence https://angular.io/api/common/ Ngclass
Vous pouvez utiliser ici est Un lien de travail Démo ngclass comme suggéré par ritik ou vous pouvez utiliser ngstyle
Je veux changer juste une couleur d'élément de tableau normal, exemple Namelist = [User1, User2, User3, User4]; Sans utiliser l'objet Array
Avez-vous vérifié la démo? Je pense que selon votre question, cela répond à vos besoins, mais vous pensez toujours que cela ne remplisse pas vos exigences, je ne parviens pas à comprendre ce que vous voulez faire exactement.
Vous insérez un objet à l'intérieur de la matrice, cela ne fonctionne que pour les éléments de valeur de clé (objet JSON), mais j'ai besoin d'éléments normaux tels que le tableau = [1,2,3]. Quoi qu'il en soit, il est également utile pour les objets JSON merci
Vous pouvez utiliser des CSS conditionnels à l'aide de NgClass
<div [className]="condition ? 'example-class' : 'other-class'"></div>
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">..
</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
//html code
<td (click)="select(name)"
[class.highlight]="isSelected(name)"
>{{name}}</td>
//Ts code
selectedName = '';
select(name){
this.selectedName = name;
}
isSelected(name){
return this.selectedName === name;
}
//css code
.highlight{
background: #42A948; /* green */
}
@Ajay Pouvez-vous s'il vous plaît expliquer sur [classe.highlight] . Parce que quelque chose de nouveau pour moi, et je suis curieux d'en savoir plus à ce sujet. Merci et aussi, veuillez fournir un exemple de lien s'il vous est possible.
@Farhatzaman Veuillez passer à travers ce lien angular.io/Guide/template-syntax#Class-Binding