Angular2 HTTPリクエストが失敗します

Question

これは私の最初の質問です。私は、API上のhttpリクエストに問題があります。

EXCEPTION： 'オブジェクト'タイプの異なる[オブジェクトオブジェクト]を見つけることができません。要求を実行すると、次のエラーがコンソールに表示されます。 NgForは、配列などのIterablesへのバインドのみをサポートしています。

各ファイルの内容は次のとおりです。

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

そして、私は、要求（入力 - スパイダーマン）から受け取ったJSONファイル：私は問題がわかりません

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

すべてがOKのようです...

ありがとうございます！

Answer 1

あなたは<div *ngFor="#peli of pelis">要素を持っています。そして、あなたはここ=>

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

対象となるthis.pelisを設定していると、あなたは

例外を取得している：型 'オブジェクト' が異なるサポート対象 '[Objectオブジェクトを]' が見つかりません。 NgForは、配列などのIterablesへのバインドのみをサポートしています。

pelisは配列ではないので、このエラーが発生しています。例えば

： 代わりの

data => this.pelis = data 

試してみてください。

data => this.pelis = [data]