显示星级

Question

我有一个打印星级的移动应用程序.

这是我的代码

 <ion-list *ngFor="let item of ListOfitems">
{{item.rating}}
<div class="stars"> 
    <span class="star on"></span>
    <span class="star half"></span>
    <span class="star"></span>
</div>
</ion-list>

类明星在显示彩色星

班级明星半显示半色星

星级显示不是彩色星

假设{{item.rating}}是2.50.我如何在跨度类中操纵它打印出2颗彩色星星,半星形和2颗半星形的彩色星星？

Answer 1

您可以ngClass根据 的值在范围上添加类item.rating。

<span class="star"
  [ngClass]='{
    on: item.rating >= 1,
    half: item.rating == 0.5,
  }'
></span>

<span class="star"
  [ngClass]='{
    on: item.rating >= 2,
    half: item.rating == 1.5,
  }'
></span>

<span class="star"
  [ngClass]='{
    on: item.rating >= 3,
    half: item.rating == 2.5,
  }'
></span>

<span class="star"
  [ngClass]='{
    on: item.rating >= 4,
    half: item.rating == 3.5,
  }'
></span>

<span class="star"
  [ngClass]='{
    on: item.rating >= 5,
    half: item.rating == 4.5,
  }'
></span>