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.

Answers


You can use function inside *ngFor so solution should 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>

Maybe the simplest solution without any TS code:

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

You can do like this

<li *ngFor='let in of [0,1,2,3,4];let i = index'>{{i}}</li>

Try this

<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"/>{{item.rank}} </p> </div> </div>

For your specific use-case you can use this code:

HTML:

<div *ngFor="let i of arr(item.rank)"> // arr is declared as Array in our .ts file
   <img src="" class="img-responsive"
</div>

.ts:

export class SomeComponent {
  arr = Array; // declaring arr as Array
}

the arr will take in your rank attribute value and create an Array of that length and then you can easily loop as many times as your value represents.

try this code hope it will be helpful.


Simplest way is to define an Array in the .ts file

i = Array
count : number = 3

You can dynamically change the value in any of your functions

In the template, the loop can be included as follows

 <div *ngFor="let j of i(count)">
    // Loop content here
 <div>

I had to break the loop so i followed the following approach. It's just an alternate way to do so.

I don't know whether it's helpful or not still sharing that piece of code.

As Gunter mentioned:

There is no option to break ngFor.

<div *ngFor="let business of businessList; let i = index">
    <div *ngIf="i < 2">
        <span class="bold gray"> {{ business.name }}</span>
        <p class="small light-gray">{{ business.details }}</p>
    </div>
</div>

Need Your Help

OpenSSL error installing ruby 2.0.0-p195 on Mac with rbenv

ruby homebrew rbenv

I'm trying to install Ruby 2.0.0-p195 using rbenv on a Mac (Mountain Lion) and got this error.

Difference between Console.Read() and Console.ReadLine()?

c# input console inputstream

I'm new to this field and I'm very confused: what is the real difference between Console.Read() and Console.ReadLine()?