不顯示半角評分以及如何在角度星級的點擊功能中選擇半角評分？

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

請告訴我們如何顯示一半的評價和點擊選擇半評級。在任何使用此插件的機構中，請告訴我們。

來源

2017-07-17 Harleen Kaur Arora

沒有ü嘗試'[評分] =「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

來源

2017-07-22 14:29:28 Skeptor

使用從這個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

來源

2017-07-22 14:51:56 Aravind

不顯示半角評分以及如何在角度星級的點擊功能中選擇半角評分？

回答

相關問題