Ionic2 + Angular2 - 带有离子图标星的动态速率值

Question

我正在尝试构建一个从 0 到 5 星（及其中间值，如 x.5 [example 4.5] ）的简单动态速率，该速率从 javascript 接收值。

我用 *ngFor 寻找了一些东西，但我不明白它是如何工作的。有人可以解释/帮助我吗？

如果有帮助，对于离子，我们有 3 种类型的星星可用：

<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>

例如，如果我从服务器收到一个值率 = 3.5，它会呈现：

<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-half"></ion-icon>
<ion-icon name="star-outline"></ion-icon>

我正在使用 javascript，没有打字稿。

非常感谢 ：）

ps不确定这个标题是否更好，欢迎任何建议:)

Answer 1

这是一种方法：

<ion-item>
  <ion-icon *ngIf="myRating>=1" name="star"></ion-icon>
  <ion-icon *ngIf="myRating>=2" name="star"></ion-icon>
  <ion-icon *ngIf="myRating>=3" name="star"></ion-icon>
  <ion-icon *ngIf="myRating>=4" name="star"></ion-icon>
  <ion-icon *ngIf="myRating>=5" name="star"></ion-icon>
  <ion-icon *ngIf="myRating%1!=0" name="star-half"></ion-icon>
  <ion-icon *ngIf="myRating==0" name="star-outline"></ion-icon>
  <ion-icon *ngIf="myRating<=1" name="star-outline"></ion-icon>
  <ion-icon *ngIf="myRating<=2" name="star-outline"></ion-icon>
  <ion-icon *ngIf="myRating<=3" name="star-outline"></ion-icon>
  <ion-icon *ngIf="myRating<=4" name="star-outline"></ion-icon>
</ion-item>

它在 HTML 中占用更多空间，但不需要任何额外的 javascript。在这里，myRating是星值。我测试了所有 11 个可能的值。