Estoy usando ng-rating para mostrar el valor promedio de la puntuación. El problema es cuando el valor promedio es como 3.97. Ng-rating todavía lo muestra como 3 estrellas. ¿Cómo puedo hacer que se muestre como la mitad de una estrella? mi html:
<div style="font-size: x-large; color: orange;"><ngb-rating [max]="5" [(rate)]="overallScore" [readonly]="false"></ngb-rating></div>Ejemplo para valor 3.67: estrella
Editar: ¿Al probar la solución del sitio de arranque 4 corazones , el relleno del corazón es un poco cuadrado?
Edit2:
Modelo:
<ng-template #t let-fill="fill"> <span class="star" [class.full]="fill === 100"> <span class="half" [style.width.%]="fill">⭐</span>⭐ </span> </ng-template>He cambiado el código a css
.star { position: relative; display: inline-block; font-size: 3rem; color: #d3d3d3; } .star.full { color: #ffa600; } .star.half { position: absolute; display: inline-block; overflow: hidden; color: #ffa600; }y da ese resultado: estrellas
Para la plantilla personalizada con decimales, puede usar lo siguiente:
<ng-template #scoreTemplate let-fill="fill"> <span class="star" [class.full]="fill === 100"> <span class="half" [style.width.%]="fill">⭐</span>⭐ </span> </ng-template> <ngb-rating max="5" [(rate)]="overallScore" [readonly]="true" [starTemplate]="scoreTemplate"> </ngb-rating>pero también necesitas los estilos:
.star { position: relative; display: inline-block; font-size: 3rem; color: #d3d3d3; &.full { color: #ffa600; } &.half { position: absolute; display: inline-block; overflow: hidden; color: #ffa600; } }Por solo media estrella y no todos los decimales puedes usar:
<ng-template #scoreTemplate let-fill="fill"> <span class="star" [class.full]="fill < 50"> <span class="half" [style.width.%]="fill >= 50 ? 50 : 0">⭐</span>⭐ </span> </ng-template>Además, puede reemplazar el emoji con su icono personalizado.