angularngfor

angular: how to loop for numbers?


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.


Solution

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