我可以使用内置的角度指令重复* ng任意次数吗? [英] Can I repeat *ngFor an arbitrary number of times using built in angular directives?

问题描述

下面是我现在所拥有的:

Below is what I have now:

<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>

您可能已经猜到了，它将为产品具有的星数重复一个星号图标. 它照常工作，但是，我觉得必须有更好的方法.理想情况下，我想使用:

As you may have guessed, it will repeat a star icon for the number of stars a product has. It works as is, however, I feel like there must be a better way. Ideally I would like to use:

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

我知道我可以使用指令或管道来封装此功能.我只是在问，有没有一种方法可以使用内置的角度指令任意重复HTML标签.

推荐答案

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

Create a backing array in the component that you populate with the appropriate number of stars

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

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

这篇关于我可以使用内置的角度指令重复* ng任意次数吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！