Angular 找不到不同的支持对象'；[对象对象]'；类型为'；对象'；。NgFor只支持绑定到数组之类的可重用文件

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

[
  {
    "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());
    }

最后，我以这种方式调用了服务：

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.

---

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

在这里，当您进行

get

调用时，您不需要使用

this.requests=

（然后

请求将有可观察的订阅）。您将在可观察的
success
中得到响应，因此在success中设置
请求
值是有意义的（您已经在这样做了）

从中删除此。请求

ngOnInit（）{
this.requests=this.\u http.getRequest（）.subscribe（res=>this.requests=res）；
}

到

ngOnInit（）{
this._http.getRequest（）.subscribe（res=>this.requests=res）；
}

this.\u http.getRequest（）
返回订阅，而不是响应值。
响应值是由传递给订阅（…）的回调指定的。

我遇到了相同的错误，因为我映射了如下HTTP响应：

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

请注意，我是如何像变量而不是方法一样意外调用.json的

将其更改为：

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

成功了。

您可以将书籍（第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);
    });
}

---

在您的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集合的名称。请尝试上面的代码，我确信它会工作。

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

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> 

{{element.any_property}

我也遇到过同样的问题

我的初始json

{"items":

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

我已在[]内更改了json

[{"items":

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

---

我也有同样的问题。这就是我解决问题的方法。 首先，当发生错误时，我的数组数据来自DB，如下所示--

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

---

它解决了我的问题。

this.requests=res

这里您试图将以下响应分配给对象

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

---

因为，对象格式与响应格式不同，所以您必须从响应中分配

res.body

部分以获取所需内容。

要迭代具有如下json格式的对象

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

将它赋给一个变量

let rawData={“mang”：{…}，“lemon”：{…}

创建用于保存值（或键）的空数组

让dataValues=[]//对于值

让dataKeys=[]//对于钥匙

循环键并将值（和键）添加到变量

for（让我们输入rawData）{//注意'in'
push（rawData[key]）；
数据键。按（键）；
}

现在有了一个键和值数组，可以在*ngFor或for循环中使用

for（让数据值为d）{
console.log（“数据值”，d）；
}

{{Data}json}

---

使用async将AWS中的所有数据转换为数组对象…

在使用带角度的spring boot时；确保无论是否创建默认值，都应使用异步管道。文件：

例如：

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

{{a.name}}

只需将var声明为一个数组，您在其中保存数据，它对我有效

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

listingdata:Array=[]；
this.listingdata=data.results.rows；

---

并在html页面上循环listingdata

对于通过Google到达这里的任何其他有此问题的人，请检查

*ngFor

指令的主机元素是否准确。我的意思是，我遇到了这个错误，花了很长时间研究修复程序，然后才意识到我已经将

*ngFor

放在

ng模板

元素上，而不是我想重复的组件上

不正确

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

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

---

*********将结果解析为JSON对象：JSON.prase（RESULT.arrayOfObjects）***********

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

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

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

JSON.parse(result.arrayOfObjects)

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

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>

这是解决办法

当您从数据库接收阵列时。您将数组数据存储在变量中，但变量定义为object。这一次您将得到错误

我从数据库接收数组，并在变量“bannersliders”中对该数组进行排序bannersliders'类型现在为'any'，但如果您写入'bannersliders'则为对象。喜欢横幅滑条：any={}。因此，这次您将数组数据存储在对象类型变量中。所以你发现了这个错误

因此，您必须编写类似“bannersliders:any；”的变量或“横幅滑动条：任意=[]”

这里我举一个例子



横幅滑环：任何；
getallbanner（）{
this.bannerService.getallbanner（）.subscribe（数据=>{
这个。bannersliders=数据；
})
}
将该对象存储到数组中，然后迭代该数组
导出类AppComponent{
公共对象：object=null；
公共myArr=[]；
构造函数（）{
this.obj={
jon:{用户名：'jon'，genrePref:'rock'}，
露西：{username:'lucy'，genrePref:'pop'}，
迈克：{username:'mike'，genrePref:'rock'}，
卢克：{用户名：'luke'，genrePref:'house'}，
<my-component *ngFor=let group of groups$ | async" [prop1]="group.key" ... </my-component>

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

JSON.parse(result.arrayOfObjects)

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>