vedu vedu - 4 months ago 394
AngularJS Question

Angular2 : Iterate *ngfor particular times [ Error: NgFor only supports binding to Iterables such as Arrays. ]

I am trying to iterate a for loop for specific times ( angular 2.0.0-rc.4 ) . For ex. 5 times or 10 times..


home.component.html :

{{arr_length}} //printing 10 i.e. I have specified in home.component.ts

<tr *ngFor="let i of arr_length ; let ind = index">
<td>
//code goes here...
</td>
</tr>


But in *ngFor it throws error :
NgFor only supports binding to Iterables such as Arrays.


I am a newbie in angular. Any help would be appreciated.

home.component.ts :

import { Component } from '@angular/core';
@Component({
selector: 'home',
templateUrl: '../templates/home.component.html',
directives: [],
providers: []
})
export class HomeComponent
{
arr_length: number;
constructor()
{
this.arr_length = 10;
}
}

Que Que
Answer

You are iterating over a number. I think you want to iterate over the array so from your component change your binding to just the array of your elements not there length. If you want to loop just for n times. the you could create array of n numbers. and loop over that array. here is example to loop 10x On your component :

 export class HomeComponent
    {
        arr_length;
        constructor() 
        {
            this.arr_length = Array(10).fill().map((x,i)=>i);;
        }
    }

On your template

 <tr *ngFor="#number of arr_length">
       <td>
            //code goes here...
      </td>
</tr>
Comments