Ionic2 + Angular2 - 带 ion-icon 星的动态速率值

Question

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

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

如果有帮助，对于 ionic，我们有 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，没有打字稿。

非常感谢:)

p.s。不知道这个标题好不好，欢迎大家指教:)

Answer 1

如果你有一个像

这样的数组

value = ['star', 'star', 'star', 'star-half', 'star-outline'];

您可以使用 ngFor 呈现您的 HTML 喜欢

<ion-icon *ngFor="let icon of icons" [name]="icon"></ion-icon>

或取决于 name 是什么（属性或属性）

<ion-icon *ngFor="let icon of icons" name="{{icon}}"></ion-icon>

Answer 2

这是一种方法：

<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 中占用更多 space，但不需要任何额外的 javascript。这里，myRating 是星级值。我测试了所有 11 个可能的值。

Answer 3

另一种方法是创建一个带有 switch case 的函数，或者如果 return 图标的类型，以清理代码 html。

html:

<Ion-item>
   <Ion-icon [name]="validate(myRating)"> </ion-icon>
</Ion-item>

函数：

Validate(e:string): string {
   Let res;
   if (e> 1){
     res="star";
   }
   else {
     res="star-outline";
   }

   Return result;
}

Answer 4

我已经使用你们提供的提示找到了这个解决方案：

function printRating (rating) {

  let max_rate       = 5;
  let rounded_rating = Math.round(rating);
  let array_stars    = new Array(max_rate);
  array_stars.fill('star-outline');

  for(let i=0; i < rounded_rating; i++) {
    array_stars[i] = 'star';

    if(i === rounded_rating - 1 && rating % 1 !== 0) {
      array_stars[i] = 'star-half';
    }
  }

  return array_stars;
}

在我的组件中，我将结果数组关联到一个变量

this.stars = this.printRating(this.seller.rating);

最后在我根据结果数组打印的视图中

<ion-icon *ngFor="let star of stars" name="{{star}}"></ion-icon>

希望这对某人有所帮助！

Ionic2 + Angular2 - 带 ion-icon 星的动态速率值

Ionic2 + Angular2 - dynamic rate value with ion-icon star

javascript

rate

ionic2

ngfor

angular