悬停时的角材质图标

Posted 2023-02-22

【中文标题】悬停时的角材质图标

【英文标题】：angular material icon on hover

【发布时间】：2019-03-24 09:32:32

【问题描述】：

我已经使用角材质图标制作了一个星级组件：

<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 更改（仅用户悬停垫子图标的时间）

（对不起，我对英语不太友好）

【问题讨论】：

您的要求不明确。请详细说明您的问题。

@SunilSingh 我已经编辑了我的问题。我希望它更清楚：S

【参考方案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
    

【讨论】：

如果我想改变一个星值，它是用星数组。这段代码什么都不做

好的（抱歉迟到了）