找不到不同的支持对象' [object Object]'类型'对象'。 NgFor仅支持绑定到诸如Arrays之类的Iterables。 uncatachable

时间:2017-08-19 11:02:03

标签: angular typescript

您好我无法弄清楚这个问题。我的数据是传递给html的对象数组,我收到了以下错误。

  

找不到不同的支持对象' [object Object]'类型'对象'。 NgFor仅支持绑定到Iterables,例如Arrays。

Html文件

<div class="dropdown-menu dropdown-menu-right" *ngIf="userRes" >
  <div *ngFor="let link of userRes">
  <h6 [ngClass]="{'dropdown-header': link.type === 'header', 'dropdown-item': link.type === ''}" i18n *ngIf="link.type != 'separtor'">{{link.title}} </h6>
  <div class="dropdown-divider"  *ngIf="link.type == 'separator'"></div>
  </div>
</div>

数据 (5)[对象,对象,对象,对象,对象]

 links=
  [
  {
     type:'header',
     title:'Account'
  },

  {
     title:'Profile',
     description:'View your profile',
     url:'http://www.test.com/user/profile/url/here',
  },
  {
     title:'Board',
     description:'View your board',
     url:'http://www.test.com/user/board/url/here',
  },
  {
     type:'separator'
  },
  {
     title:'Settings',
     description:'Manage your settings',
     url:'http://www.test.com/user/settings/url/here',
  }

]

component.ts

      this.userRes = this.userIntermediateService.userDetail(1)
  .subscribe(value => {

    console.log(value);
   let userRes= Object.keys(value).map(key => value[key])
    console.log(this.userRes);
  })

任何帮助将不胜感激。提前谢谢。

2 个答案:

答案 0 :(得分:0)

您的变量为links,但您的ngFor需要userRes

userRes= [
  {
     type:'header',
     title:'Account'
  },

  {
     title:'Profile',
     description:'View your profile',
     url:'http://www.test.com/user/profile/url/here',
  },
  {
     title:'Board',
     description:'View your board',
     url:'http://www.test.com/user/board/url/here',
  },
  {
     type:'separator'
  },
  {
     title:'Settings',
     description:'Manage your settings',
     url:'http://www.test.com/user/settings/url/here',
  }

]

<强> LIVE DEMO

答案 1 :(得分:0)

仅在代码

下删除this.userRes =
this.userIntermediateService.userDetail(1)
  .subscribe((value) => {

    console.log(value);
   this.userRes= Object.keys(value).map(key => value[key])
    console.log(this.userRes);
  });

你可以参考这个答案Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays