CODEWITHSUNDEEP
angularngfor
vedu
vedu

Reputation: 213

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;
    }
}

Upvotes: 0

Views: 825

Answers (1)

Mehari
Mehari

Reputation: 3247

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>

Upvotes: 1

Related Questions