Impossible de trouver un objet support différent '[objet Objet]' de type 'objet'. NgFor ne supporte que la liaison à Iterables tels que Arrays

Question

J'ai examiné des questions similaires, mais aucune d'entre elles ne m'a aidé. Je vais recevoir un objet comme celui-ci:

 [
  {
    "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"
  }
]
 

et voici mon service http pour le recevoir:

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

et enfin, dans le i appelé le service de cette façon:

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

Malheureusement, lorsque la page se charge, elle se plaint:

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

Alors, qu'est-ce qui ne va pas avec ce code?

Answer 1

Là, vous n’avez pas besoin d’utiliser this.requests= lorsque vous passez get appel (dans ce cas, requests aura un abonnement observable). Vous obtiendrez une réponse observable sous la forme success observable. Vous devez donc définir la valeur requests de succès (ce que vous faites déjà).

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

Answer 2

Supprimer this.requests de

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

à

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

this._http.getRequest() renvoie un abonnement, pas la valeur de la réponse. La valeur de réponse est attribuée par le rappel transmis à subscribe(...)

Answer 3

Vous pouvez déclarer les livres (sur la ligne 2) comme un tableau:

   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);
    });
  }
 

Answer 4

Dans votre fichier JSOn, veuillez apporter les modifications ci-dessous.

  {
    "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"
      }
    ]
    }
 

Et après ça:

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

Les données sont en fait le nom de la collection tge du fichier json. S'il vous plaît essayez le code ci-dessus, je suis sûr que cela fonctionnera.

Answer 5

J'ai eu la même erreur parce que j'ai mappé la réponse HTTP comme ceci:

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

Notez que j’ai accidentellement appelé .json comme une variable et non comme une méthode.

Le changer pour:

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

a fait le tour.