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

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

ACTION_UP

Answer 2

在组件文件中创建一个类型为array

的变量

export class RenewPackageComponent implements OnInit {
 myArr = Array;
}

在您的Html文件中

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

我可以使用内置的角度指令重复* ng任意次数吗？

2 个答案: