如何使用字体在angular5视图中显示回顾星

我在数据库中有review stars值。项目的示例2.5。 我想显示在模板中使用字体真棒这一点

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

您可以执行以下操作。向类中添加新的

Arr

属性

export class YourComponent {
  Arr = Array;
} 

然后，在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>

您可以通过

*ngFor

动态创建项目，并通过

ngClass

根据

饥饿值

值为项目赋予类（动态）：

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

---

下面是示例（我更改了一些类以正确呈现输出）。在这里，您可以随心所欲地玩游戏并配置行为。

以下是代码片段：

StackBlitz网址：

应用程序组件.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");
      }
    }
  }
}

导出类AppComponent实现OnInit{
值=2.5；//添加0.5
星列表：字符串[]=[]；
恩戈尼尼特（）{
设i=1；
因为（i=1；i多亏了商业自杀，这是我一直在寻找的解决方案

为了完全满足我的需要，我做了一个改进，也显示了“空”星星。我在*ngIF中添加了其他内容

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

并添加了这一块，将显示“空”的星星



在index.html中，我将字体awesome版本更改为v5.1.0，以支持类fas（solid）和far（regular）

完整的代码在这里
如何存储评级？它是组件类的一个属性吗？是的，它是一个属性。
this.饥饿值=2.5
显示完整的五颗星（fa-star-o）如何，然后将其填充。
错误范围错误：数组长度无效
为.5个数字。感谢您指出这一点，我已修改了答案以解释这一点
<span *ngFor="let star of starList">
  <i class="{{star}}"></i>
</span>

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

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