angular - 如何使用 font-awesome 在 angular5 View 中显示评论星

Question

我在数据库中有评论星级值。项目的示例 2.5。我想使用 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>

按照评论值的星级会怎样显示？

我使用了 *ngIf，但这似乎有点矫枉过正了很多代码，可能还有如何表示半颗星。

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

Answer 1

以下是代码片段:

StackBlitz 网址: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>