* ngFor with angular2

0

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

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

In Angular JS 2, I believe it would be done like this (it's just an example, I already know it does not work but I'm looking for something similar).

<ion-icon *ngFor="1 to 5" name="star"></ion-icon>
    
asked by anonymous 27.04.2016 / 18:54

1 answer

2

Following just the standard of Angular2 the correct syntax would be this:

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

Where it just replaces the same function as ng-repeat of Angle 1.x, where it will loop through the length of its array, you do not even have to specify or know how long it is. If it is 5, 10, or 300, the ngFor will go through all of them. The difference between ngFor and for() is that ngFor is applied directly to the template, ie if you want to do some manipulation of the data before moving to view , this

It will all depend on your goal.

Edited:

I confess that I have never used component , but if the logic is the same as using icon-font (what I imagine it to be) you can use an ng-class to apply the class corresponding to the number 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>

So you should just assign the value received from the bank to the for() property and it will apply the class corresponding to the fill. Again, since I have not used Ionic , I do not know if there is a better option, but I believe that the one I went through should solve your problem in a more practical way.

    
27.04.2016 / 20:23