Angular2 HTTP 请求失败
Angular2 HTTP request fails
这是我的第一个问题。 API 上的 http 请求有问题。当我发出请求时,控制台上显示以下错误:
异常:找不到 'object' 类型的不同支持对象“[object Object]”。 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"}
不知道问题出在哪里,好像一切正常...
提前致谢!!
您有一个 <div *ngFor="#peli of pelis">
元素。你在这里将 this.pelis
设置为一个对象 =>
.subscribe(
data => this.pelis = data,
你得到了
异常:找不到类型 'object' 的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables,例如数组。
由于 pelis 不是数组,因此您会收到此错误。
例如:
而不是
data => this.pelis = data
尝试:
data => this.pelis = [data]
这是我的第一个问题。 API 上的 http 请求有问题。当我发出请求时,控制台上显示以下错误:
异常:找不到 'object' 类型的不同支持对象“[object Object]”。 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"}
不知道问题出在哪里,好像一切正常...
提前致谢!!
您有一个 <div *ngFor="#peli of pelis">
元素。你在这里将 this.pelis
设置为一个对象 =>
.subscribe(
data => this.pelis = data,
你得到了
异常:找不到类型 'object' 的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables,例如数组。
由于 pelis 不是数组,因此您会收到此错误。
例如: 而不是
data => this.pelis = data
尝试:
data => this.pelis = [data]