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

Question

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

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

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

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

例如，如果我从服务器接收到 value rate = 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，没有打字稿。

非常感谢:)

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

Answer 1

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

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>

希望这对某人有所帮助！

Answer 2

另一种方法是创建一个带有 switch case 的函数，或者如果返回图标的类型，以清理代码 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 3

这是一种方法：

<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 个可能的值。

Answer 4

如果你有一个类似的数组

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>