不显示半分以及如何 select 在 Angular 星级评分中点击功能减半？

Question

我正在使用 Angular Star Rating 插件在 angular2 中显示评分。一个问题是不显示半评级并且不会 select 点击事件的半评级。

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>

请告诉我们如何显示半分以及点击 select 半分。任何人使用这个插件请告诉我们。

Answer 1

这是来自库的源代码：

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

如您所见，每个星星只有一个点击事件。 stars 数组是从代码中获取的：

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

所以，我很清楚图书馆还没有半星的实现。原始的 CSS 库具有显示半星的功能，这就是为什么我们使用 svg 可以获得半星。

也许我们可以尝试使用 CSS 来实现我们自己的实现。

更新:

似乎无法通过该库实现点击获得半星。

但是有很好的纯CSS解决方案，比如this

Answer 2

使用来自此 repo 的自定义组件，如下所示，

@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

不显示半分以及如何 select 在 Angular 星级评分中点击功能减半？

Does not show half rating and how to select half rating on click function in Angular Star Rating?

angular

rating