Fehler ngFor mit Object Array in Angular 2

Question

mit habe ich ein Array von Objekten in meiner Klasse Component definiert wie folgt:

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

Und in meiner Vorlage Ich versuche es mit einem ngFor zu verwenden wie so :

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

Die Liste richtig i angezeigt wird, aber eine Konsole Fehlermeldung erhalten, die sagt:

EXCEPTION: Error in ./DeskComponent class DeskComponent - inline template:1:24 ORIGINAL EXCEPTION: TypeError: iterator1.next is not a function

Beachten sie, dass es funktioniert Es ist in Ordnung mit einer Reihe von Saiten. Gibt es etwas, das ich vermisse? Jede Hilfe wäre willkommen. Vielen Dank.

Edit: (! Arbeiten in Edge-fine) Erhalten dieser Fehler nur in Firefox und Chrome

Answer 1

Sie haben keine Instanz von Array zur Zeit der Bindung.

Versuch:

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