显示星级评分

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>

类star on显示彩色星星

类star half显示半个彩色星星

类star display不显示彩色星星

假设{{item.rating}}为2.50。如何在span类中操作，使其打印出2个彩色星星、半颗星和2个半颗未着色的星星？

- Jennica

---

请发布一个 [mcve]。 - mplungjan

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>

- void

---

如果我想显示非彩色星星，应该放置什么约束条件？例如，2.5个是彩色的，另外2.5个是非彩色的。 - Jennica

它们会自动出现，对吗？因为无论如何你都会有<span class="star"></span>。 - void

这正是我所想的。我认为这是因为我的ngIf，检查是否有人评分。无论如何，非常感谢您，先生。void - Jennica

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>

- RITESH ARORA