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

Question

我看了类似的问题,但没有一个帮助过我.我将收到如下对象:

[
  {
    "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.

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

Answer 1

在那里你不需要this.requests=在get打电话时使用(然后requests会有可观察的订阅).您将获得可观察的响应,success因此requests成功的设置 值是有意义的(您已经在做了).

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

Answer 2

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(...)

Answer 3

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

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

请注意我如何不小心将 .json 称为变量而不是方法。

将其更改为：

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

成功了。

Answer 4

在您的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集合的名称.请尝试上面的代码,我相信它会起作用.

Answer 5

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

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> 

Answer 6

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