Geek Answers Handbook

Angular2 NgFor only supports binding to Iterables, e.g. arrays

Angular2 rc.6

I get the following error when starting a loop on json data

core.umd.js: 5995 EXCLUSION: Error in app / modules / mbs / components / menu.html: 5: 4 caused by: Unable to find a different supporting object "object of object" of type "object". NgFor only supports binding to Iterables, such as arrays.

my html loop, note . I just want to iterate over the properties and arrays inside the response.

<li *ngFor="let item of menuItems"> {{item}} </li>

my service method

 getMenuItems():Promise<any>{ return this.http.get('api/menu').toPromise(). then(response => response.json()) .catch(this.handleError) }

my next answer is json

 { "text": "Menu", "children": [ { "text": "Home", "url": "/spatt-web/home" }, { "text": "Configure", "children": [ { "text": "Tri-Party Program", "children": [ { "text": "Margins and Filters", "url": "/sp-rrp/config/operation" }, { "text": "Fields and Desirability", "url": "/spatt-rrp/config/program" } ] }, { "text": "Shared Settings", "url": "/shared-config/config" }, { "text": "SOMA Limits", "url": "/outright-config/config" } ] }, { "text": "Plan", "children": [ { "text": "Tri-Party RRP Operations", "url": "/spatt-rrp/plan" } ] }, { "text": "Track" }, { "text": "Administer" }, { "text": "Help", "children": [ { "text": "RRP Operations", "url": "RRPference" }, { "text": "RRP Margin Calls and Recalls", "url": "RRPRecallference" } ] } ] }
+8
source share
3 answers

Looks like you want

 <li *ngFor="let item of menuItems.children"> {{item}} </li>
+15
source

Generally speaking, an error means that you are trying to iterate over an object instead of an array or observable.

+1
source

in case you are trying to iterate over an object:

  <div *ngFor="let location of locations | keyvalue"> {{location.key}} - {{location.value | json}} </div>

KeyValuePipe Documntation

0
source

More articles:


All Articles