アンケートの半分の評価は表示されません。

Question

angle2で評価を表示するために、Angular Star Ratingプラグインを使用しています。問題は、半分の評価が表示されず、クリックイベントの半分の評価を選択しないことです。

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> 

あなたが見ることができるように、それぞれの星ごとに1つだけクリックイベントがあります。星の配列がコードからフェッチされます。

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

Answer 2

のような純粋なCSSと非常に良好な解決策は、uは[評価] `してみてください=" 2.6でしたが、以下のようにこの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