Bagaimana untuk menukar latar belakang div berdasarkan medan komponen pada tetikus

Question

Saya mempunyai div yang apabila ia dilegar, warna latar belakang berubah, saya juga perlu memilih warna berdasarkan elemen dalam komponen.

<div *ngFor="let u of users;" 
  [style:hover.background-color] = "u.selected ? 'red' : 'blue' ">
</div>

Answer 1

Dari pautan komen di atas:

"Sebenarnya ini bukan isu Sudut: pseudo-elemen bukan sebahagian daripada pokok DOM dan oleh itu jangan dedahkan mana-mana API DOM yang boleh digunakan untuk berinteraksi dengannya

Jadi anda boleh menggunakan pembolehubah CSS sebaliknya:

Fail gaya:

.highlight:hover {
  background-color: var(--highlight-color);
}

Templat:

<div class="highlight" *ngFor="let u of users;" 
         [ngStyle] = "{'--highlight-color': u.selected ? 'red' : 'blue'} ">
      {{ u.name }}
    </div>