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

问题描述：

我正在使用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>

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

没有ü尝试'[评分] =“2.6 “'？ – Dhyey

是的，但显示相同的问题。 –

我不能说没有调试但是你可以给[ngx_rating]（https://www.npmjs.com/package/ngx-rating）一个镜头造成问题 – Dhyey

答

这是从库的源代码：

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

更新：

它看起来像它不可能实现点击获取与该库半星。

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

答

使用从这个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

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

相关推荐