N'affiche pas la moitié de la note et comment sélectionner la moitié de la note sur la fonction de clic dans Angular Star Rating?

Question

J'utilise le plugin Angular Star Rating pour afficher l'évaluation en angulaire2. Un problème est que la moitié de la note n'est pas affichée et ne sélectionne pas la moitié de la note sur l'événement de clic.

Component.ts: -

onClickResult:IStarRatingOnClickEvent; 

    getRatingValue = ($event:IStarRatingOnClickEvent) => { 
    console.log('onClick $event: ', $event); 
    this.onClickResult = $event; 
    }; 

Component.html: -

<star-rating-comp [starType]="'icon'" [rating]=2.6 [readOnly]="true" [showHalfStars]='true' (onClick)="getRatingValue($event)"> 
    </star-rating-comp> 

S'il vous plaît nous dire comment montrer la moitié note et cliquez sur Choisir une note de moitié. Dans tout corps utilisé ce plugin s'il vous plaît dites-nous.

Answer 1

Ceci est à partir du code source de la bibliothèque:

<div class="star-container"> 
    <div class="star" 
     (mouseenter)="onStarHover(star)" 
     *ngFor="let star of stars" 
     (click)="onStarClicked(star)"> 
     <i *ngIf="!svgVisible()" class="star-empty {{classEmpty}}"></i> 
     <i *ngIf="!svgVisible()" class="star-empty {{classHalf}}"></i> 
     <i *ngIf="!svgVisible()" class="star-filled {{classFilled}}"></i> 
     <svg *ngIf="svgVisible()" class="star-empty default-star-empty-icon"> 
      <use xmlns:xlink="http://www.w3.org/1999/xlink" [attr.xlink:href]="pathEmpty"></use> 
     </svg> 
     <svg *ngIf="svgVisible()" class="star-half default-star-half-icon"> 
      <use xmlns:xlink="http://www.w3.org/1999/xlink" [attr.xlink:href]="pathHalf"></use> 
     </svg> 
     <svg *ngIf="svgVisible()" class="star-filled default-star-filled-icon"> 
      <use xmlns:xlink="http://www.w3.org/1999/xlink" [attr.xlink:href]="pathFilled"></use> 
     </svg> 
    </div> 
</div> 

Comme vous pouvez le voir, il n'y a qu'un seul événement de clic pour chaque étoile. Le tableau étoiles est récupéré à partir du code:

static getStarsArray(numOfStars: number): Array<number> { 
    let stars: Array<number> = []; 
    for (let i = 0; i < numOfStars; i++) { 
     stars.push(i + 1); 
    } 
    return stars; 
} 

Ainsi, il est très clair pour moi que la bibliothèque n'a pas encore mise en œuvre pour la star moitié. La bibliothèque originale de CSS a la fonctionnalité pour montrer la demi-étoile c'est pourquoi nous pouvons obtenir la moitié d'étoile si nous employons svg.

Peut être que nous pouvons essayer d'implémenter notre propre implémentation en utilisant le CSS.

Mise à jour:

Il semble que ce ne est pas possible de mettre en œuvre pour obtenir la moitié cliquant étoiles avec cette bibliothèque.

Mais il y a de très bonnes solutions avec CSS pur comme this

Answer 2

Utilisez un composant personnalisé de ce repo comme ci-dessous,

@Component({ 
    selector: 'pm-star', 
    template: ` 
    <div class="crop" 
    [style.width.px]="starWidth" 
    [title]="rating" 
    (click)="onClick()"> 
    <div style="width: 86px"> 
     <span class="glyphicon glyphicon-star"></span> 
     <span class="glyphicon glyphicon-star"></span> 
     <span class="glyphicon glyphicon-star"></span> 
     <span class="glyphicon glyphicon-star"></span> 
     <span class="glyphicon glyphicon-star"></span> 
    </div> 
</div>`, 
    styleUrls: ['./star.comp.css'] 
}) 
export class StarComponent implements OnChanges { 
    @Input() rating: number; 
    starWidth: number; 
    @Output() ratingClicked: EventEmitter<string> = 
      new EventEmitter<string>(); 

    ngOnChanges(): void { 
     this.starWidth = this.rating * 86/5; 
    } 

    onClick(): void { 
     this.ratingClicked.emit(`The rating ${this.rating} was clicked!`); 
    } 
} 

LIVE DEMO