我可以使用内置的 angular 指令重复 *ngFor 任意次数吗？

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>

我知道我可以使用指令或管道来封装此功能；我只是问是否有一种方法可以使用内置 angular 指令任意重复 HTML 标签。

Answer 1

在您用适当数量的星填充的组件中创建一个支持数组

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

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

Answer 2

在你的组件文件中创建一个数组类型的变量

export class RenewPackageComponent implements OnInit {
 myArr = Array;
}

在您的 Html 文件中

<i *ngFor="let i of myArr(product.rating.avgStars)" class="fa fa-star"></i>

我可以使用内置的 angular 指令重复 *ngFor 任意次数吗？

Can I repeat *ngFor an arbitrary number of times using built in angular directives?

angular2-directives

angular2-template

angular