在离子中实现半星

Posted 2023-03-13

【中文标题】在离子中实现半星

【英文标题】：Implementing half stars in ionic

【发布时间】：2018-08-15 14:15:20

【问题描述】：

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

     <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>

我想去掉四舍五入并显示半颗星，我该怎么做？

【问题讨论】：

图标星星可以减半吗？

【参考方案1】：

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

npm install --save ionic2-rating

也为我工作，包括半分。 CSS 自定义也在那里。

【参考方案2】：

请看这个库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>

【参考方案3】：

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

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

【讨论】：

你能帮我如何使用引导程序吗？