Ionic2 + Angular2-带有离子图标星的动态速率值 [英] Ionic2 + Angular2 - dynamic rate value with ion-icon star

问题描述

我正在尝试建立一个从0到5星的简单动态速率(其中间值如x.5 [示例4.5])，该动态速率从javascript接收值.

I'm trying to build a simple dynamic rate from 0 to 5 stars (and its middle values like x.5 [example 4.5] ) that receives a value from the javascript.

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

I looked for something with *ngFor but I'm not understanding how that works. Can someone explain / help me?

如果有帮助，对于离子型，我们可以提供3种类型的恒星:

If it helps, for ionic, we have 3 type of stars available:

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

例如，如果我从服务器接收到值率= 3.5，则会呈现:

For example if I receive from server a value rate = 3.5, it renders:

<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，没有打字稿.

I'm using javascript, no typescript.

非常感谢您:)

p.s.不知道这个标题是否更好，欢迎任何建议:)

p.s. not sure if this title is the better, any suggestion is welcome :)

推荐答案

这里是一种方法:

<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种可能的值.

It takes up more space in the HTML, but doesn't require any additional javascript. Here, myRating is the star value. I tested it for all 11 possible values.

这篇关于Ionic2 + Angular2-带有离子图标星的动态速率值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！