значок углового материала при наведении - PullRequest
Новая
       24

значок углового материала при наведении

0 голосов
/ 19 октября 2018

Я сделал компонент рейтинга звезды, используя иконку углового материала: 

<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_border.(Если значение звезды - star_border, я просто уже изменяю цвет)

Я понятия не имею, как это сделать.Если кто-то может мне помочь, спасибо.

Редактировать для большего разрешения:

Мой компонент отображается так: 

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

Если пользовательНаведите курсор мыши на значок мата, и значение значка мата - звезда, я хочу изменить с помощью star_hover (только в тот момент, когда пользователь наводит значок мата)

(Извините, я не очень дружу с английским)

1 Ответ

0 голосов
/ 19 октября 2018

Вот изменение, которое вы можете внести -

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
    }
}
...