在离子中实现半星

Question

所以基本上，我有一个带有评级模块的离子移动应用程序。 但是，当我得到一个不是整数的平均值时，我很难实现半星。 所以我做了什么，我把它四舍五入了。 并显示离子图标星号。 这些是我的代码，

<span *ngIf="item.rating" class="review">     
{{item.rating}}
<ion-icon name="star" *ngIf="Round(item.rating) > 0"></ion-icon>
<ion-icon name="star" *ngIf="Round(item.rating) > 1"></ion-icon>
<ion-icon name="star" *ngIf="Round(item.rating) > 2"></ion-icon>
<ion-icon name="star" *ngIf="Round(item.rating) > 3"></ion-icon>
<ion-icon name="star" *ngIf="Round(item.rating) > 4"></ion-icon>
</span>

我想摆脱四舍五入并显示半星，我该怎么做？

Answer 1

请看这个库 https://www.npmjs.com/package/ionic2-rating

安装：

npm install --save ionic2-rating

用法：

<rating
[(ngModel)]="0.5"
readOnly="true"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false">
</rating>

Answer 2

如果你有时间，请使用这个库 https://github.com/fraserxu/ionic-rating

否则，您可以使用引导程序。 实现该技术会增加代码复杂性，并且不被视为良好做法。

Answer 3

https://www.npmjs.com/package/ionic2-rating

npm install --save ionic2-rating

也为我工作，包括一半的评级。
CSS定制也在那里。