angular2 NgFor 仅支持绑定(bind)到 Iterables，例如 Arrays

Question

Angular2 rc.6

在 json 数据上运行循环时出现以下错误

core.umd.js:5995 异常:app/modules/mbs/components/menu.html:5:4 中的错误由以下原因引起:找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定(bind)到 Iterables，例如数组。

我的 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"
            }
         ]
      }
   ]
}

Answer 1

看起来像你想要的

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