Nie można odnaleźć obiektu pomocniczego "[obiekt obiektu]" typu "obiekt". NgFor obsługuje tylko wiązanie z Iterabelami, takimi jak Arrays

Question

Przyjrzałem się podobnym pytaniom, ale żaden z nich nie pomógł mi. zamierzam odbierać obiektu jak następuje:

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

i tu jest mój serwis http je otrzymać:

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

i wreszcie, w zadzwoniłem usługę w ten sposób:

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

Niestety, gdy strona ładuje narzeka z:

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

Co dzieje się z tym kodem?

Answer 1

Nie musisz używać this.requests= podczas wykonywania połączenia get (wtedy requests będzie miał możliwą do zaobserwowania subskrypcję). Otrzymasz odpowiedź w obserwowalnym success, więc ustawienie wartości requests w sensie sukcesu ma sens (co już robisz).

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

Answer 2

Usuń this.requests z

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

do

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

this._http.getRequest() zwraca abonament, a nie wartość odpowiedzi. Wartość odpowiedź jest przypisany przez zwrotnego przekazanego subscribe(...)

Answer 3

miałem ten sam błąd bo odwzorowane odpowiedź HTTP takiego:

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

nocie jak przypadkowo nazwie .json jak zmienna i nie jak metoda.

Zmiana go:

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

załatwiło sprawę.

Answer 4

Można zadeklarować książki (on line 2) jako tablicę:

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 5

W pliku JSON, sprawdź poniżej zmiany.

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

A potem:

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

Dane są rzeczywiście nazwa kolekcji tge pliku JSON. Proszę wypróbować powyższy kod, jestem pewien, że zadziała.

Answer 6

Moje rozwiązanie jest stworzenie rury o zwrot tablicy wartości lub propierties sprzeciw

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

Szablon Wdrożenie

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

Answer 7

mam w obliczu tego samego problemu

mój początkowy json

{"items": 

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

Zmieniłem json wewnątrz []

[{"items": 

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