在离子

时间:2018-03-07 12:58:32

标签: css angularjs typescript ionic-framework ionic2

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

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

我想摆脱圆形并显示半星我该怎么做?

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

或者你可以使用bootstrap。 实现该技术将增加代码复杂性,而不被视为良好实践。

答案 2 :(得分:0)

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

npm install --save ionic2-rating

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