Question

我使用Angular Star Rating插件显示angular2中的评分。问题是没有显示半评级，也没有选择点击事件的半评级。

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>

请告诉我们如何显示半价和点击选择半价。在使用此插件的任何机构中，请告诉我们。

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>

如您所见，每颗星只有一个点击事件。星号数组来自代码：

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实现我们自己的实现。

<强>更新：

看起来无法实现点击以获得该库的半星。

但是像this

这样的纯CSS有很好的解决方案

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

不显示半评级以及如何在角度星评级中选择点击功能的半评级？

2 个答案: