在 Angular 2 中将 ngFor 与对象数组一起使用时出错答案

【问题标题】：Error using ngFor with Object Array in Angular 2在 Angular 2 中将 ngFor 与对象数组一起使用时出错
【发布时间】：2016-09-25 02:59:58
【问题描述】：

我在 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>

列表正确显示，但我收到控制台错误消息：

例外：./DeskComponent 类 DeskComponent 中的错误 - 内联模板：1:24 原始异常：TypeError：iterator1.next 不是函数

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

编辑：仅在 Firefox 和 Chrome 中出现此错误（在 Edge 中工作正常！）

【问题讨论】：

代码看起来不错。没有更多信息很难说。
你能在 plunker 上重新创建你的问题吗？
你是在.ts中使用内联模板还是templateUrl
@mayur 我正在使用 webpack 加载模板：template: require('./desk.component.html')
@PardeepJain 我无法在 plunkr 上重现这个:(

标签： arrays angular ngfor

【解决方案1】：

您在绑定时没有数组实例。

尝试：

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

【讨论】：