*ngFor with angular2

Question

I would like to create a loop of repetition, but in this loop I already have the amount of times it will perform. Below is an example of the expected result using javascript.

for(i = 0; i < 5; i++) {
    console.log( i + 'estrelas!');
}

In Angularjs 2, I believe it would be done like this (it’s just an example, I know it doesn’t work but I’m looking for something similar).

<ion-icon *ngFor="1 to 5" name="star"></ion-icon>

Answer 1

Following only the pattern of Angular2 the correct syntax would be this:

<div *ngFor="#hero of heroes">{{hero.fullName}}</div>

Where it just replaces the same function of ng-repeat of Angular 1.x, where it will loop the entire length of your array, you don’t need to specify or know what the extension is. If it’s 5, 10 or 300 ngFor will go through all. The difference between the ngFor and the for() that you refer to, is that the ngFor is applied directly in the template, ie if you want to do some manipulation of the data before going to the view, this should be done yet on component responsible, ai yes you can use the for() for only later pass to your view (html).

Everything will depend on your goal.

---

Edited:

I confess I never used Ionic, but if the logic is the same as using icon-font (which I imagine it is) you can use an ng-class to apply the class corresponding to the amount of votes. For example:

<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 1, 
    'ion-android-star': valorEstrela >= 1}">
</i>
<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 2,
    'ion-android-star': valorEstrela >= 2}">
</i>
<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 3, 
    'ion-android-star': valorEstrela >= 3}">
</i>
<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 4, 
    'ion-android-star': valorEstrela >= 4}">
</i>
<i [ngClass]="{
    'ion-android-star-outline': valorEstrela < 5, 
    'ion-android-star': valorEstrela >= 5}">
</i>

Thus, you should only assign the value received from the bank to the property valorEstrela and it will apply the class corresponding to the fill. Again, as I have never used Ionic I don’t know if there’s a better option, but I believe that the one I went through should solve your problem in a more practical way.