admin管理员组

文章数量:1029815

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.

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

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>

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>

I'm using javascript, no typescript.

Thank you so much :)

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

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.

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

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>

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>

I'm using javascript, no typescript.

Thank you so much :)

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

  • javascript
  • angular
  • ionic2
  • rate
  • ngfor
Share Improve this question asked May 25, 2016 at 13:05 sandrina-psandrina-p 4,1709 gold badges37 silver badges66 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 5

Here's one way to do it:

<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>

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.

If you have an array like

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

you can use ngFor to render your HTML like

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

or depending on what name is (property or attribute)

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

An alternative would be to create a function with switch case or if to return the type of the icon, to clean code html.

html:

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

function:

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

   Return result;
}

I've reached this solutions using the tips that you guys provided:

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;
}

In my ponent I've associated to a variable the result array

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

And finally in the view I printed based on the result array

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

Hope this helps someone!

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.

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

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>

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>

I'm using javascript, no typescript.

Thank you so much :)

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

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.

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

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>

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>

I'm using javascript, no typescript.

Thank you so much :)

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

  • javascript
  • angular
  • ionic2
  • rate
  • ngfor
Share Improve this question asked May 25, 2016 at 13:05 sandrina-psandrina-p 4,1709 gold badges37 silver badges66 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 5

Here's one way to do it:

<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>

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.

If you have an array like

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

you can use ngFor to render your HTML like

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

or depending on what name is (property or attribute)

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

An alternative would be to create a function with switch case or if to return the type of the icon, to clean code html.

html:

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

function:

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

   Return result;
}

I've reached this solutions using the tips that you guys provided:

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;
}

In my ponent I've associated to a variable the result array

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

And finally in the view I printed based on the result array

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

Hope this helps someone!

本文标签： javascriptIonic2Angular2dynamic rate value with ionicon starStack Overflow

版权声明：本文标题：javascript - Ionic2 + Angular2 - dynamic rate value with ion-icon star - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745658621a2161750.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。