显示星级

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>

Answer 2

如果条件

，你不认为这应该是简单的吗？

     <ion-list *ngFor="let item of ListOfitems">
{{item.rating}}

<div *ngFor="let num of [1,2,3,4,5]">
    <span class="star on" *ngIf="item.rating - num > 0.5"></span>
    <span class="star half" *ngIf="item.rating - num == 0.5"></span>
    <span class="star" *ngIf="item.rating == 0 "></span>
</div>
</ion-list>