angular: how to loop for numbers?

angular ngfor
Mohammad picture Mohammad · Oct 18, 2017 · Viewed 48.3k times · Source

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.

Answer

NJoco picture NJoco · Feb 5, 2019

Maybe the simplest solution without any TS code:

<div *ngFor="let item of [].constructor(10); let i = index">
   {{i}}
</div>

Related questions

ngFor with index as value in attribute

I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works. I basically have …

Read More
*ngIf and *ngFor on same element causing error

I'm having a problem with trying to use Angular's *ngFor and *ngIf on the same element. When trying to loop through the collection in the *ngFor, the collection is seen as null and consequently fails when trying to access its …

Read More
Exception: Can't bind to 'ngFor' since it isn't a known native property

What am I doing wrong? import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `<div *ngFor="talk of talks"> {{talk.title}} by {{talk.speaker}} <p>{{talk.description}} </div>` }) class ConfTalks { talks = [ {title: …

Read More