HTTP-запрос Angular2 не работает

Это мой первый вопрос здесь. У меня проблема с http-запросами в API. Когда я делаю запрос, в консоли появляется следующая ошибка:

ИСКЛЮЧЕНИЕ: Не удается найти другой вспомогательный объект «[object Object]» типа «object». NgFor поддерживает привязку только к Iterables, таким как Arrays.

Содержимое каждого файла:

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

Не знаю в чем проблема, вроде все нормально...

Заранее спасибо!!


angular angular2-http
person Thierry Henry    schedule 11.05.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У вас есть элемент <div *ngFor="#peli of pelis">. И вы устанавливаете this.pelis как объект здесь =>

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

И вы получаете

ИСКЛЮЧЕНИЕ: Не удается найти другой вспомогательный объект «[object Object]» типа «object». NgFor поддерживает привязку только к Iterables, таким как Arrays.

Поскольку pelis не является массивом, вы получаете эту ошибку.

Например: Вместо

data => this.pelis = data

Пытаться:

data => this.pelis = [data]
person eko    schedule 11.05.2016
comment
Я новичок в Angular и не знаю, как это решить. Не могли бы вы помочь мне исправить это, пожалуйста? Это просто тест для практики. - person Thierry Henry; 11.05.2016
comment
Спасибо! Я изменяю код таким образом: alert(ошибка), () => console.log(this.pelis) ); } С этим исправлением в компиляторе появляется следующая ошибка: Назначенный тип выражения string[] не может быть назначен типу Peli[] - person Thierry Henry; 11.05.2016
comment
Ok! У меня такая же ошибка в компиляторе, но в консоли появляется объект: [Человек-паук, 1990] Теперь проблема в том, что данные не отображаются на экране. - person Thierry Henry; 11.05.2016
comment
С последним исправлением в консоли появляется следующий объект: [Object {data=Object}] - person Thierry Henry; 11.05.2016
comment
Можете ли вы снова попробовать без {} в данных - person eko; 11.05.2016
comment
Наконец-то это работает! С решением data=›this.pelis=[data] все идет нормально! Большое спасибо! - person Thierry Henry; 11.05.2016