J'ai un div qui lorsqu'il est survolé, la couleur d'arrière-plan change, je dois également sélectionner la couleur en fonction d'un élément du composant.
<div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red' : 'blue' "> </div>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
À partir du lien de commentaire ci-dessus :
"En fait, ce n'est pas un problème angulaire : les pseudo-éléments ne font pas partie de l'arborescence DOM et n'exposent donc aucune API DOM pouvant être utilisée pour interagir avec eux."
Vous pouvez donc utiliser des variables CSS à la place :Fichier de style :
.highlight:hover { background-color: var(--highlight-color); }Modèle :
<div class="highlight" *ngFor="let u of users;" [ngStyle] = "{'--highlight-color': u.selected ? 'red' : 'blue'} "> {{ u.name }} </div>