0
我正在开发我的第一个Angular2项目（构建一个口袋妖怪网络应用程序），并且在尝试加载页面时不断收到以下错误消息：.map回调函数参数未找到错误[Angular2，JavaScript]
failed to compile.
/home/mattlayton1986/workspace/pokedex/src/app/pokedex.service.ts (26,20): Cannot find name 'p'.
/home/mattlayton1986/workspace/pokedex/src/app/pokedex.service.ts (26,23): Cannot find name 'i'.
错误是我./pokedex-service.ts' file, which loads the data from the API and gets injected into the component. Here is all the code in my PokedexService`文件中出现：
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class PokedexService {
private baseUrl: string = 'https://pokeapi.co/api/v2/pokemon/';
private baseSpriteUrl: string = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/';
constructor(private http: Http) { }
getPokemon(offset: number, limit: number) {
return this.http.get(
`${this.baseUrl}?offset=${offset}&limit=${limit}`
).toPromise().then(
response => response.json().results
).then(items => items.map(
(poke, idx) => {
const id: number = idx + offset + 1;
return {
id,
name: poke.name,
sprite: `${this.baseSpriteUrl}${id}.png`
};
}
).map(getTypes(p, i))); // <-- error occurs here
}
}
function getTypes(pokemon, id) {
return this.http.get(
`${this.baseUrl}${id}`
).toPromise().then(
response => response.json().results
).then(item => item.map(
poke => {
return {
poke,
type1: poke.types.type[0].name,
type2: poke.types.type[1].name
}
}
));
}
作为参考，如果有帮助，这是我的主要成分，它的模板，这使得使用该服务来加载数据口袋妖怪：
app.component.html
<h1>Angular 2 Pokedex</h1>
<span>This is a sample app using Angular 2 RC5. Check out the <a href="https://github.com/argelius/angular2-pokedex">source code here</a></span>
<hr />
<div class="pokedex">
<div class="pokedex-pokemon" *ngFor="let p of pokemon" [pokemonTypes]="p">
<div class="pokedex-pokemon-id">
{{p.id}}
</div>
<img [ngClass]="{'hidden': !p.imageLoaded}" class="pokedex-pokemon-sprite" (load)="p.imageLoaded = true" [attr.src]="p.sprite" />
<div class="pokedex-pokemon-name">
{{ p.name | capitalize }}
</div>
<div class="pokedex-pokemon-type1">
{{ p.types.type1 }}
</div>
<div calss="pokedex-pokemon-type2">
{{ p.types.type2 }}
</div>
</div>
</div>
<button class="load-button" (click)="loadMore()" [disabled]="isLoading">
<span *ngIf="!error">
<span *ngIf="isLoading">Loading...</span>
<span *ngIf="!isLoading">Load more</span>
</span>
<span *ngIf="error">
Loading failed
</span>
</button>
app.component.ts
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { PokedexService } from './pokedex.service';
import { Pokemon } from './pokemon';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
pokemon: Pokemon[] = [];
isLoading: boolean = false;
error: boolean = false;
constructor(private pokedexService: PokedexService) {}
ngOnInit() {
// Loads the initial data.
this.loadMore();
}
loadMore() {
this.isLoading = true;
// User the Pokedex service
// to load the next 9 Pokemon.
this.pokedexService.getPokemon(this.pokemon.length, 9)
.then(pokemon => {
pokemon = pokemon.map(p => {
p.imageLoaded = false;
return p;
});
this.pokemon = this.pokemon.concat(pokemon);
this.isLoading = false;
this.error = false;
})
.catch(() => {
this.error = true;
this.isLoading = false;
});
}
}
我打电话给我的地图功能的回调与数组我映射在当前的项目，该项目的指标参数，然后在函数定义getTypes中包含了两个形式参数，所以我不确定错误来自何处或如何解决。任何帮助清除这一点非常感谢。