web-dev-qa-db-ja.com

angular2 NgForは、配列などの反復可能オブジェクトへのバインドのみをサポートします

Angular2 rc.6

JSONデータでループを実行すると、次のエラーが発生します

core.umd.js：5995例外：app/modules/mbs/components/menu.html：5：4でエラーが発生しました：タイプ 'object'の異なるサポートオブジェクト '[object Object]'が見つかりません。 NgForは、配列などのIterableへのバインドのみをサポートします。

私のhtmlループ、注：応答内のプロパティと配列を繰り返したいだけです。

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

私のサービス方法

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

}

以下は私の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
13
d-man

あなたが望むように見えます

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

一般的に、エラーは、配列またはオブザーバブルの代わりにオブジェクトを反復しようとしていることを意味します。

2
JanBrus

オブジェクトを反復処理しようとしている場合：

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

KeyValue Pipeのドキュメント

2
Hasan