[英]angular material icon on hover
我使用角形材質圖標制作了星級評分組件:
<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值為star_border,我已經更改了顏色)
我不知道該怎么做。 如果有人可以幫助我,謝謝。
編輯以獲得更多許可:
我的組件呈現如下:
<mat-icon>[VALUE]</mat-icon>[...]<mat-icon>[VALUE]</mat-icon>
// [VALUE] is star or star_border (change on click)
如果用戶將鼠標懸停在mat-icon上並且mat-icon的值為star,那么我想使用star_hover進行更改(僅當用戶將mat-icon懸停時)
(對不起,我對英語不太友善)
這是您可以進行的更改-
<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>
updateStar(star){
if(star.value == 'star'){
star.value = 'star_hover';
}else{
//star.value = 'star'; //you may light to reverse it
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.