I have a collection of items, where each item have a rank
attribute, which is a number. I wan to loop over this number, here is what I've tried:
<div class="col-md-3 col-sm-4 item-container" *ngFor="let item of items">
<div class="item">
<p class="rank">
<img src="" class="img-responsive" *ngFor="let rank of item.rank"/>
</p>
</div>
</div>
typescript:
export class MonthpicksComponent{
items: Item[] = [];
//...
}
export class Item{
id: number;
name: string;
img: string;
desc: string;
rank: number;
voters: number;
}
but unlucky the first loop shows only one result and the second loop showed nothing.
You can use javascript inside *ngFor
so the solution could look like this:
my.component.ts
counter(i: number) {
return new Array(i);
}
my.component.html
<li *ngFor='let in of counter(5) ;let i = index'>{{i}}</li>