Html Angular Project中的星级 Select

• 我们可以使用ngClass，并根据用户的 Select 添加一个类selected！
• 我们可以使用@Input和@Output来更新名为rating的属性中用户的选定值
• 我们可以使用emits 5 - then latest value的逻辑，因为我们显示的是恒星的反转.

请查看下面的工作堆栈闪电战和代码

import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-star-rating',
  standalone: true,
  template: `
    <div class="stars-container mt-2">
        <div *ngFor="let star of starsArray; let i = index" class="star" (click)="selectRating(i)" [ngClass]="{'selected': 5 - rating <= i}">
            <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24">
                <path fill="#00000"
                    d="m7.69 19.346l1.614-5.33L5.115 11h5.216L12 5.462L13.67 11h5.215l-4.189 3.015l1.614 5.331L12 16.07z" />
            </svg>
        </div>
    </div>
  `,
  styles: `
  .stars-container {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    flex-direction: row-reverse;

    .star {
        transition: .3s ease;

        svg {
            width: 3rem;
            height: auto;

            path {
                fill: gray; // Color de las estrellas no seleccionadas
                transition: fill .3s ease; // Transición suave del color
            }
        }

        &:hover ~ .star svg path {
            fill: gold; // Color de las estrellas seleccionadas al hacer hover
        }

        &:hover svg path {
            fill: gold; // Color de la estrella seleccionada al hacer hover
        }

        &.selected ~ .star svg path {
            fill: gold; // Color de las estrellas seleccionadas al hacer hover
        }
 
        &selected svg path {
            fill: gold; // Color de la estrella seleccionada al hacer hover
        }
    }
}

.star:hover svg path,
.star:hover~.star svg path,
.star.highlighted svg path {
    fill: $primario;
}
  `,
  imports: [CommonModule],
})
export class StarRatingComponent implements OnInit {
  @Input() rating: number = 0;
  @Output() ratingChange: EventEmitter<number> = new EventEmitter<number>();
  starsArray: boolean[] = new Array(5);

  selectRating(i: number) {
    this.ratingChange.emit(5 - i);
  }
  constructor() {}

  ngOnInit() {}
}

Stackblitz Demo