如何在角度 8 中将多个列表悬停时添加类

Question

这里有一些静态列表。我需要分别在悬停和鼠标退出列表时更改类。但是这里的类一次为所有列表更改。这是下面的代码

首页.组件.html

<div>
<ul>
<li [ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">test1</li>
<li [ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">test2</li>
<li [ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">test3</li>
<li [ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">test4</li>
</ul>
</div>

Home.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
/* First data */
console.log('hello');
}
color:string = 'red';
changeStyle($event){
this.color = $event.type == 'mouseover' ? 'yellow' : 'red';
}
}

.css

.yellow{
border-bottom:1px solid;    
}
.red{
background:red;
color:#FFF;
}

Answer 1

您可以使用$event.target.className。它适用于当前事件类。尝试以下解决方案 它会起作用。

changeStyle($event){
$event.target.className= $event.target.className == 'red' ? 'yellow' : 'red';
}

或

changeStyle($event){
$event.target.className = $event.type == 'mouseover' ? 'yellow' : 'red';
}