Angular 根据模型变量生成星星

我正在开发一个评级星组件，它根据从数据库获得的结果显示星星

我在app.ts中有一个变量，如下所示

this.rating = 4;

 <div class="rating-star-group pull-right">
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star-outline"></i>
 </div>

我的HTML如下所示

this.rating = 4;

 <div class="rating-star-group pull-right">
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star"></i>
     <i class="zmdi zmdi-star-outline"></i>
 </div>

---

是否应该添加一个NG IF和检查变量来显示类，或者有更好的方法吗？

< P>可以考虑使用Bootstrap 4上的NG Bootstrap < /Cord>插件，它是角度2的包装器（与<代码> UI Bootstrap < /代码>）相同

这对所有情况都有很大的影响

<ngb-rating [(rate)]="currentRate"></ngb-rating>

我不想使用任何plugin@Sajeetharan然后建立自己的，看看