找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays答案

【问题标题】：Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays
【发布时间】：2017-02-10 16:15:07
【问题描述】：

我查看了类似的问题，但没有一个对我有帮助。我将收到如下对象：

[
  {
    "id": 1,
    "name": "Safa",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 2,
    "name": "Safa",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 3,
    "name": "Salman",
    "email": "neerupeeru@mail.ee",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  }
]

这是我的 http 服务来接收它：

getRequest(){
        return this._http.get("http://consultationwebserver.herokuapp.com/requests").map(res => res.json());
    }

最后，在 i 中以这种方式调用服务：

requests;
    constructor(private _http:requestService){}
    ngOnInit(){
        this.requests=this._http.getRequest().subscribe(res=>this.requests=res);
    }

不幸的是，当页面加载时它抱怨：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

那么，这段代码出了什么问题？

【问题讨论】：

请在您使用该对象的地方添加您的模板代码。

标签： angular angular-template

【解决方案1】：

对我来说，当我将索引添加到 *ngFor 时，错误已解决。

<tr *ngFor = "let element of element_list; let i=index">
             <td>{{element.id}}</td>
             <td>{{element.status}}</td>
             <td>{{element.name}}</td>
 </tr>

【讨论】：

【解决方案2】：

当您拨打get 时，您不需要使用this.requests=（然后requests 将有可观察的订阅）。您将在可观察到的 success 中得到响应，因此成功设置 requests 值是有意义的（您已经在这样做了）。

this._http.getRequest().subscribe(res=>this.requests=res);

如果仍然显示与类型相关的错误，请在订阅参数对象上添加any/RelevantModel 类型。

this._http.getRequest().subscribe(
  (res: any[]) => this.requests =res
);

【讨论】：

这不是上述错误的解决方案（找不到类型为“object”的不同支持对象“[object Object]”。）他必须使用数据类型，例如：requests: any=[] 甚至我遇到了同样的问题，我通过添加 dataType 来修复
同意@kva 只有当它不能渲染对象的成员时才会抛出错误
基本上 NgFor 只适用于像数组这样的可迭代项。如果您声明字典并尝试使用 *ngfor ，则会出现这些类型的错误。例如，当您声明这样的数组时 this.myArray = {}.. 会出现问题.. 它应该是 this.myArray = []。问题会解决。

【解决方案3】：

Store that objects into Array  and then iterate the Array
export class AppComponent {

 public obj: object =null;
 public myArr=[];

  constructor(){

    this.obj = {
      jon : {username: 'Jon', genrePref: 'rock'},
      lucy : {username: 'Lucy', genrePref: 'pop'},
      mike : {username: 'Mike', genrePref: 'rock'},
      luke : {username: 'Luke', genrePref: 'house'},
      james : {username: 'James', genrePref: 'house'},
      dave : {username: 'Dave', genrePref: 'bass'},
      sarah : {username: 'Sarah', genrePref: 'country'},
      natalie : {username: 'Natalie', genrePref: 'bass'}
  }
  }
  ngOnInit(){
    this.populateCode();
  }

  populateCode(){
    for( let i in this.obj) {   //Pay attention to the 'in'
    console.log(this.obj[i]);
    this.myArr.push(this.obj[i]);
  }
  }
 }



<div *ngFor="let item of myArr ">
    {{item.username}}
    {{item.genrePref}}
  </div>

【讨论】：

【解决方案4】：

这是解决方案。

当您从数据库接收数组时。并且您将数组数据存储在一个变量中，但该变量定义为对象。这次你会得到错误。

我正在从数据库接收数组，并将该数组放入变量“bannersliders”中。 'bannersliders' 类型现在是 'any' 但如果你写 'bannersliders' 是一个对象。像横幅滑块：any={}。所以这次你将数组数据存储在对象类型变量中。所以你会发现那个错误。

所以你必须写变量像'bannersliders:any;'或'bannersliders:any=[]'。

这里我举个例子。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
bannersliders:any;
  getallbanner(){
    this.bannerService.getallbanner().subscribe(data=>{
      this.bannersliders =data;
   })
  }

【讨论】：

【解决方案5】：

您可以将书籍（第 2 行）声明为数组：

title: any = 'List of books are represted in the bookstore';
books: any = []; 
constructor(private service:  AppService){
}

ngOnInit(){
  this.getBookDetails();
}

getBookDetails() {
    this.service.getBooks().subscribe(books => {
        this.books = books.json();
        console.log(this.books);
    });
}

【讨论】：

问题中没有提到books。
必须说，自从我将数组初始化为products = {} 并且应该完成products:any = [] 之后，这很有帮助，因为*ngFor 1st 在空的object 上运行，他不能跨度>
@bresleveloper 和我一样.. 感谢您指出.. 它也解决了我的问题.. :)

【解决方案6】：

*********** 将结果解析为 JSON 对象：JSON.prase(result.arrayOfObjects) ***********

在遇到这个问题后，我来到了这个页面。所以，我的问题是服务器以字符串的形式发送对象数组。是这样的：

当我从服务器获取结果后在控制台上打印结果是字符串：

'arrayOfObject': '[
                  {'id': '123', 'designation': 'developer'},
                  {'id': '422', 'designation': 'lead'}
               ]'

所以，我必须在从服务器获取此字符串后将其转换为 JSON。解析从服务器收到的结果字符串的使用方法：

JSON.parse(result.arrayOfObjects)

【讨论】：

以上是你得到的结果是字符串数据类型的场景。所以，检查数据类型，如果它是字符串解析它。

【解决方案7】：

对于通过 Google 到达此处的其他任何人，请检查 *ngFor 指令的主机元素是否准确。我的意思是，我遇到了这个错误并花了很长时间研究修复，然后才意识到我将 *ngFor 放在了 ng-template 元素上，而不是放在我想重复的组件上。

不正确

<ng-template *ngFor=let group of groups$ | async" ...>
  <my-component [prop1]="group.key" ... </my-component>
<\ng-template>

正确

<my-component *ngFor=let group of groups$ | async" [prop1]="group.key" ... </my-component>

事后看来，我知道这是一个明显的错误，但我希望这里的答案能避免我现在头疼的问题。

【讨论】：

【解决方案8】：

只需将 var 声明为您保存数据的 array，它对我有用。

listingdata:Array<any> = [];
this.listingdata = data.results.rows;

在html页面上循环listingdata

【讨论】：

【解决方案9】：

您应该使用异步管道。文档：https://angular.io/api/common/AsyncPipe

例如：

<li *ngFor="let a of authorizationTypes | async"[value]="a.id">
     {{ a.name }}
</li>

【讨论】：

这种方法解决了我的问题。那是在我阅读此答案之前，但值得让其他人知道您的方法有效。谢谢。

【解决方案10】：

在您使用带有 Angular 的 spring boot 时；确保你是否创建默认

【讨论】：

确保你应该使用默认构造函数

【解决方案11】：

<ul>
<li *ngFor = "let Data of allDataFromAws  | async">
  <pre> {{ Data | json}}</pre>
</li>
</ul>

使用 async 将 allDataFromAws 转换为 Array Object....

【讨论】：

【解决方案12】：

遍历具有如下 json 格式的对象

{
  "mango": { "color": "orange", "taste": "sweet" }
  "lemon": { "color": "yellow", "taste": "sour" }
}

将其分配给变量

let rawData = { "mang":{...}, "lemon": {...} }
创建一个空数组来保存值（或键）

let dataValues = []; //For values

let dataKeys = []; //For keys
遍历键并将值（和键）添加到变量中

for(let key in rawData) { //Pay attention to the 'in' dataValues.push(rawData[key]); dataKeys.push(key); }
现在你有了一个可以在 *ngFor 或 for 循环中使用的键和值的数组

for(let d of dataValues) { console.log("Data Values",d); }

<tr *ngFor='let data of dataValues'> ..... </tr>

【讨论】：

【解决方案13】：

this.requests=res 在这里您尝试将以下响应分配给对象，

{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK",
"url":"xyz","ok":true,"type":4,"body":[{}]}

由于对象格式与响应格式不同，因此您必须从响应中分配 res.body 部分以获取所需内容。

【讨论】：

【解决方案14】：

我也有同样的问题。这就是我解决问题的方法。第一次发生错误时，我的数组数据是这样从数据库中传来的——，

{brands: Array(5), _id: "5ae9455f7f7af749cb2d3740"}

确保您的数据是一个数组，而不是一个带有数组的对象。只有数组看起来像这样 --,

(5) [{…}, {…}, {…}, {…}, {…}]

它解决了我的问题。

【讨论】：

【解决方案15】：

我也遇到了同样的问题

我的初始 json

{"items":

         [
           {"id":1,
            "Name":"test4"
           },
           {"id":2,
            "Name":"test1"
           }
         ]
}

我在 [] 中更改了我的 json

[{"items":

         [
           {"id":1,
            "Name":"test4"
           },
           {"id":2,
            "Name":"test1"
           }
         ]
}]

【讨论】：

【解决方案16】：

我的解决方案是创建一个用于返回值数组或属性对象的管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'valueArray',
})
export class ValueArrayPipe implements PipeTransform {

  // El parametro object representa, los valores de las propiedades o indice
  transform(objects : any = []) {
    return Object.values(objects);
  }
}

模板实现

<button ion-item *ngFor="let element of element_list | valueArray" >
    {{ element.any_property }}
</button>

【讨论】：

【解决方案17】：

在您的 JSOn 文件中，请进行以下更改。

 {
    "data":
    [
      {
        "id": 1,
        "name": "Safa",
        "email": "neerupeeru@mail.ee",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      },
      {
        "id": 2,
        "name": "Safa",
        "email": "neerupeeru@mail.ee",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      },
      {
        "id": 3,
        "name": "Salman",
        "email": "neerupeeru@mail.ee",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      }
    ]
    }

然后：

 this.http.get(url).map(res:Response) => res.json().data);

数据实际上是json文件的tge集合的名称。请尝试上面的代码，我相信它会工作。

【讨论】：

【解决方案18】：

从

中删除this.requests

ngOnInit(){
  this.requests=this._http.getRequest().subscribe(res=>this.requests=res);
}

到

ngOnInit(){
  this._http.getRequest().subscribe(res=>this.requests=res);
}

this._http.getRequest() 返回订阅，而不是响应值。响应值由传递给subscribe(...)的回调分配

【讨论】：

知道如何在控制台中显示响应吗？当我执行 console.log(this.requests) 时，我得到一个订阅者对象
this._http.getRequest().subscribe(res=>{ this.requests=res; console.log(this.requests);});

【解决方案19】：

我遇到了同样的错误，因为我已经像这样映射了 HTTP 响应：

this.http.get(url).map(res => res.json);

注意我是如何不小心把 .json 当作变量而不是方法来调用的。

改成：

this.http.get(url).map(res => res.json());

成功了。

【讨论】：

我的问题是我没有按照 angular 2 hero 教程中的建议将来自服务器的响应包装为“数据”