Czy mogę powtórzyć * ngDowolną liczbę razy używając wbudowanych dyrektyw kątowych? - kątowe, kątowe2-szablonowe, kątowe2-dyrektywy

Poniżej znajduje się to, co mam teraz:

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

Jak można się domyślić, ikona będzie powtarzać gwiazdkę dla liczby gwiazdek, które produkt ma. Działa tak, jak jestjednak uważam, że musi istnieć lepszy sposób. Idealnie chciałbym użyć:

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

Jestem świadomy, że mogę potencjalnie używać dyrektyw lub potoków do enkapsulacji tej funkcji; Po prostu pytam, czy istnieje sposób użycia wbudowanych dyrektyw kątowych do arbitralnego powtarzania znacznika HTML.

Odpowiedzi:

Utwórz tablicę zabezpieczającą w składniku, który wypełniasz odpowiednią liczbą gwiazdek

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

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

W pliku komponentu utwórz zmienną typu tablica

export class RenewPackageComponent implements OnInit {
myArr = Array;
}

W twoim pliku HTML

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