Могу ли я повторять * ng Для произвольного количества раз, используя встроенные угловые директивы?

Question

Ниже то, что я сейчас:

<div class="reviews"> 
    <a href="#"> 
     <i *ngIf="product.rating.avgStars >= 1" class="fa fa-star"></i> 
     <i *ngIf="product.rating.avgStars >= 2" class="fa fa-star"></i> 
     <i *ngIf="product.rating.avgStars >= 3" class="fa fa-star"></i> 
     <i *ngIf="product.rating.avgStars >= 4" class="fa fa-star"></i> 
     <i *ngIf="product.rating.avgStars >= 5" class="fa fa-star"></i> 
    <span class="amount">({{product.rating.reviewCount}} Reviews)</span> 
</a> 

Как вы уже догадались, он будет повторять значок звезды на количество звезд продукт имеет. Он работает как есть, однако я чувствую, что должен быть лучший способ. В идеале я хотел бы использовать:

<i *ngFor="+product.rating.avgStars" class="fa fa-star"></i>

Я знаю, что я могу потенциально использовать директивы или трубы, чтобы инкапсулировать эту функциональность; Я просто спрашиваю, есть ли способ использовать встроенные угловые директивы для произвольного повторения HTML-тега.

Answer 1

Создание массива подкладочного в компоненте, который вы заселить с соответствующим количеством звезд

class RatingComponent { 
    ngOnInit() { 
    myRating = Array(numberOfStarsFromSomewhere).fill('whatever'); 
    } 
} 

<i *ngFor="let rating of myRating" class="fa fa-star"></i>