3

我正在尝试构建一个从 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>

例如，如果我从服务器收到一个值 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，没有打字稿。

太感谢了 ：）

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

4

4 回答 4

5

这是一种方法：

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

于 2016-05-25T18:52:31.083 回答
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>
于 2016-05-25T13:14:22.153 回答
0

另一种方法是创建一个带有 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;
}
于 2017-04-19T14:43:48.743 回答
0

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

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>

希望这对某人有帮助！

于 2017-07-21T22:42:55.930 回答