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

Question

Angular2 rc.6

当运行在 json 数据

上循环时出现以下错误

core.umd.js:5995 异常：app/modules/mbs/components/menu.html:5:4 中的错误，原因是：找不到类型为 [= 的不同支持对象“[object Object]” 27=]。 NgFor 仅支持绑定到 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>

Answer 2

一般来说，错误意味着您正在尝试迭代对象而不是数组或可观察对象。

Answer 3

如果您尝试迭代对象：

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

KeyValuePipe Documntation

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

angular2 NgFor only supports binding to Iterables such as Arrays

angular

angular2-services