在Angular 2中使用ngFor with Object Array时出错

时间:2016-05-26 22:37:43

标签: arrays angular ngfor

我在Component类中定义了一个对象数组,如下所示:

deskCategories : Array<any>;
this.deskCategories = [
        {
            catLabel : 'Tools',
            catIcon : 'suitcase'
        },
        {
            catLabel : 'Accounts',
            catIcon : 'table'
        },
        {
            catLabel : 'File Manager',
            catIcon : 'file'
        },
        {
            catLabel : 'Stock',
            catIcon : 'cubes'
        }
     ];

在我的模板中,我试图将其与ngFor一起使用:

<div class="column" *ngFor="let cat of deskCategories">
    <div class="ui center aligned container">
        <i class="huge {{cat.catIcon}} icon link"></i>
        <p>{{cat.catLabel}}</p>
    </div>
</div>

列表显示正常,但我收到一个控制台错误,上面写着:

  

EXCEPTION:./DeskComponent类中的错误DeskComponent - 内联模板:1:24   ORIGINAL EXCEPTION:TypeError:iterator1.next不是函数

请注意,它适用于字符串数组。有什么我想念的吗?任何帮助,将不胜感激。感谢。

编辑:仅在Firefox和Chrome中获取此错误(在Edge中正常工作!)

Error using ngFor Angular 2

1 个答案:

答案 0 :(得分:0)

绑定时你没有数组实例。

尝试:

deskCategories : [];

constructor(){ //this could/should be done in ngOnInit but not super important now

this.deskCategories = [
    {
        catLabel : 'Tools',
        catIcon : 'suitcase'
    },
    {
        catLabel : 'Accounts',
        catIcon : 'table'
    },
    {
        catLabel : 'File Manager',
        catIcon : 'file'
    },
    {
        catLabel : 'Stock',
        catIcon : 'cubes'
    }
 ];
}