悬停时的角度材质图标

Question

>我使用角度材料图标制作了一个星级组件：

<span>
<mat-icon *ngFor="let star of stars | keyvalue" (click)="check(star.key)" [ngClass]="{'checked': star.value === 'star'}">{{star.value}}</mat-icon>
</span>

和 ts：

export class StarComponent implements OnInit {
@Input() star_type: String = 'star_border';
@Input() nbStar: Number = 1;
stars: Array<String> = [];
constructor() { }
ready() {
for (let i = 0; i < this.nbStar; i++) {
this.stars.push(this.star_type);
}
}
ngOnInit() {
console.log(this.stars);
}
ngOnChanges() {
this.ready();
}
check(index) {
if (this.stars[index] === 'star_border') {
for (let i = 0; i <= index; i++) {
this.stars[i] = 'star';
}
}
else {
for (let i = this.stars.length - 1; i > index; i--) {
this.stars[i] = 'star_border';
}
}
}
}

现在，我想在悬停时更改 star.value： 如果 star.value 是 star，我想将值与 star_border 一起悬停。(如果星值是star_border我刚刚改变了颜色(

我不知道这是怎么做到的。如果有人可以帮助我，谢谢。

编辑以获得更多许可：

我的组件呈现如下：

<mat-icon>[VALUE]</mat-icon>[...]<mat-icon>[VALUE]</mat-icon>
// [VALUE] is star or star_border (change on click)

如果用户将鼠标悬停在垫子图标上并且垫子图标的值是星号，我想随star_hover更改(仅用户将鼠标悬停在垫子图标上的时间(

(对不起，我对英语不太友好(

Answer 1

这是您可以进行的更改 -

.html

<span>
<mat-icon *ngFor="let star of stars | keyvalue" (mouseenter) ="updateStar(star)" (click)="check(star.key)" [ngClass]="{'checked': star.value === 'star'}">{{star.value}}</mat-icon>
</span>

TS

updateStar(star){
if(star.value == 'star'){
star.value = 'star_hover';
}else{
//star.value = 'star'; //you may light to reverse it
}
}