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

Question

我正在尝试在特定时间迭代 for 循环 (angular 2.0.0-rc.4)。对于前。 5次或10次..

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>

但是在 *ngFor 中它抛出错误：NgFor only supports binding to Iterables such as Arrays.

我是angular的新手。任何帮助，将不胜感激。

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

Answer 1

您正在迭代一个数字。我想你想遍历数组，所以从你的组件改变你的绑定到你的元素数组而不是那里的长度。 如果你只想循环 n 次。 您可以创建 n 个数字的数组。并遍历该数组。 这是循环 10 倍的示例 在您的组件上：

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

在您的模板上

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