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

您可以执行以下操作。向您的班级添加新的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>

Answer 2

感谢商业自杀，这是我一直在寻找的解决方案。

为了完全满足我的需要，我进行了改进，以显示“空”星。我在* ngIF

中添加了其他内容

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

并添加了该块，该块将显示“空”星

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

在index.html中，我将字体真棒版本更改为v5.1.0，以支持fas（实心）和far（常规）类

在此处填写代码 StackBlitz

Answer 3

您可以通过*ngFor动态创建项目，并根据ngClass值starValue通过<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>为他们提供课程（动态）：

length

并且不要忘记初始化组件中的数组，public stars: any[] = new Array(5);将等于星数（无关紧要，半满，填充或空）：

 files <- list.files(path = "",pattern="*.txt", full.names = TRUE)
 for (i in seq_along(files)) {
   assign(paste0("DF",i), read.table(files[i], sep=";", header = T))

 }

 dfList <- list(df1=DF1,df2=DF2)

 dfList <- lapply(dfList, function(df) {

df$gender<- "F"
df


})

这是STACKBLITZ（我已经更改了一些类来正确渲染输出）。在这里，您可以随意使用并根据需要配置行为。

Answer 4

以下是代码段：

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>

如何使用font-awesome在angular5视图中显示评论星

4 个答案: