Angular2 HTTP-Anfrage schlägt fehl

Question

Dies ist meine erste Frage hier. Ich habe ein Problem mit den HTTP-Anfragen auf einer API. Wenn ich die Anfrage mache, erscheint der folgende Fehler auf der Konsole:

AUSNAHME: Kann ein anderes unterstützendes Objekt '[Objekt Objekt]' vom Typ 'Objekt' nicht finden. NgFor unterstützt nur die Bindung an Iterables wie Arrays.

Der Inhalt der einzelnen Dateien ist:

boot.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from "./app.component"; 
import {HTTP_PROVIDERS} from "angular2/http"; 

bootstrap(AppComponent,[HTTP_PROVIDERS]); 

app.component.ts

import {Component} from 'angular2/core'; 
import {HTTPTestService} from "./services/peli.service"; 
import {Peli} from "./peli"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>Búsqueda de película</h1> 
     <input #titulo placeholder="Buscar..."> 
     <button class="btn btn-success"  (click)="infoPeli(titulo.value)">Buscar</button> 
     <div *ngFor="#peli of pelis"> 
     <h1>{{peli.Title}}</h1> 
     <p>{{peli.Year}}</p> 
     </div> 
    `, 
    providers: [HTTPTestService] 
}) 

export class AppComponent { 

pelis:Peli[]; 

    constructor (private _httpService: HTTPTestService) {} 

    infoPeli(nombre:string) { 
     this._httpService.buscarPeli(nombre) 
      .subscribe(
       data => this.pelis = data, 
       error => alert(error), 
       () => console.log(this.pelis) 
      ); 
    } 
} 

peli.service.ts

import {Injectable} from "angular2/core"; 
import {Http} from "angular2/http"; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class HTTPTestService { 
    constructor(private _http:Http) { 
    } 

    buscarPeli(nombre:string) { 
     return this._http.get('http://www.omdbapi.com/? t='+nombre+'&y=&plot=short&r=json').map(res => res.json()); 
    } 
} 

peli.ts

export class Peli{ 
    Title:string; 
    Year:string; 
} 

Und die JSON-Datei, die ich von der Anfrage erhalten (Input - spiderman):

{"Title":"Spiderman","Year":"1990","Rated":"N/A","Released":"N/A","Runtime":"5 min","Genre":"Short","Director":"Christian Davi","Writer":"N/A","Actors":"N/A","Plot":"N/A","Language":"German","Country":"Switzerland","Awards":"N/A","Poster":"N/A","Metascore":"N/A","imdbRating":"5.7","imdbVotes":"90","imdbID":"tt0100669","Type":"movie","Response":"True"} 

Ich weiß nicht, wo das Problem ist, scheint alles in Ordnung zu sein ...

Vielen Dank im Voraus!

Answer 1

Sie haben ein <div *ngFor="#peli of pelis"> Element. Und Sie this.pelis setzen ein Objekt zu sein, hier =>

.subscribe(
       data => this.pelis = data, 

Und Sie sind eine

AUSNAHME bekommen: Es kann keine unterscheiden stützendes Objekt '[object Object]' vom Typ 'Objekt' gefunden. NgFor unterstützt nur die Bindung an Iterables wie Arrays.

Da Pelis kein Array ist, erhalten Sie diesen Fehler.

Zum Beispiel: Statt

data => this.pelis = data 

Versuchen:

data => this.pelis = [data]