如何使用超赞字体在angular5视图中显示评论星标 [英] How to display review stars in angular5 view using font-awesome
本文介绍了如何使用超赞字体在angular5视图中显示评论星标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在数据库中有评论星级值.物品的示例 2.5 . 我想使用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?
我使用了* ngIf,但是用很多代码和如何表示半颗星似乎显得有些矫过正.
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>
推荐答案
以下是代码片段:
StackBlitz网址: https://stackblitz.com/edit/angular-kbmtmv
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>
这篇关于如何使用超赞字体在angular5视图中显示评论星标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文