web-dev-qa-db-fra.com

angular2 NgFor ne supporte que la liaison à Iterables tels que Arrays

Angular2 rc.6

Je reçois une erreur suivante lors de l'exécution d'une boucle sur des données JSON

core.umd.js: 5995 EXCEPTION: erreur dans app/modules/mbs/components/menu.html: 5: 4 provoquée par: Impossible de trouver un objet de support différent '[objet Object]' de type 'objet'. NgFor ne prend en charge que la liaison à Iterables tels que Arrays.

ma boucle html, Note : Je veux simplement itérer les propriétés et les tableaux dans la réponse.

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

ma méthode de service

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

}

ce qui suit est ma réponse 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" } ] } ] }
angularangular2-services
8
d-man

On dirait que tu veux

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

En règle générale, l'erreur signifie que vous essayez d'itérer sur un objet au lieu d'un tableau ou observable.

0
JanBrus