How to display review stars in angular5 view using font-awesome

问题

I have the review stars value in the database. Example 2.5 for an item. I want to display this in the template using font-awesome.

<ul class="rating inline-ul">
    <li><i class="fa fa-star amber-text"></i></li>
    <li><i class="fa fa-star amber-text"></i></li>
    <li><i class="fa fa-star amber-text"></i></li>
   <li><i class="fa fa-star"></i></li>
   <li><i class="fa fa-star"></i></li>
</ul>

What will be the way to display the stars in accordance with the review value?

I used *ngIf, but that seems like overkill with a lot code and possibly how to represent the half stars.

 <ul class="rating inline-ul" *ngIf="2.5">
        <li><i class="fa fa-star amber-text"></i></li>
        <li><i class="fa fa-star amber-text"></i></li>
        <li><i class="fa fa-star amber-half"></i></li>
        <li><i class="fa fa-star"></i></li>
        <li><i class="fa fa-star"></i></li>
  </ul>

回答1:

Following are the code snippets:

StackBlitz url: https://stackblitz.com/edit/angular-kbmtmv

app.component.ts

export class AppComponent implements OnInit {
  value = 2.5; //addition of .5
  starList: string[] = [];
  ngOnInit() {
    let i=1;
    for(i=1; i<=5; i++) {
      if(i<= this.value) {
        this.starList.push("fas fa-star");
      } else if(i <= this.value+0.5) {
        this.starList.push("fas fa-star-half");
      } else {
        this.starList.push("far fa-star");
      }
    }
  }
}

app.component.html

<span *ngFor="let star of starList">
  <i class="{{star}}"></i>
</span>

回答2:

You can do the following. Add a new Arr property to your class

export class YourComponent {
  Arr = Array;
}

Then, in your html:

<ul class="rating inline-ul">
        <li  *ngFor="let i of Arr(Math.floor(starValue)).fill(1)"><i class="fa fa-star amber-text"></i></li>
        <li *ngIf="starValue % 1 === 0"><i class="fa fa-star amber-half"></i></li>
 </ul>

回答3:

Thanks to Commercial Suicide, it was the solution I was looking for.

To completely satisfy my need, I did an improvement, to also show the "empty" stars. I added else inside *ngIF

*ngIf="starValue >= i + 0.5; else emptyStar"

and added this block that will show the "empty" stars

<ng-template #emptyStar>
  <i class="far fa-star"></i>
</ng-template>

In index.html, i changed the font awesome version to v5.1.0 to support classes fas (solid) and far (regular)

Complete code here StackBlitz

回答4:

You can create items dynamically via *ngFor and give them class (dynamically too) via ngClass, based on starValue value:

<ul class="rating inline-ul">
  <li *ngFor="let star of stars; let i = index">
    <i class="fa" *ngIf="starValue >= i + 0.5" [ngClass]="{'fa-star-half': starValue >= i + 0.5 && starValue < i + 1, 'fa-star': starValue >= i + 1}"></i>
  </li>
</ul>

And don't forget to initialize the array in the component, which length will be equal to the number of stars (doesn't matter, half-filled, filled or empty):

public stars: any[] = new Array(5);

And here is the STACKBLITZ (I have changed some classes to render the output properly). Here you can play around and configure the behavior as you want.

来源：https://stackoverflow.com/questions/49582789/how-to-display-review-stars-in-angular5-view-using-font-awesome

标签

angular

font-awesome