0
私は最初のAngular2プロジェクト（ポケモンWebアプリケーションを構築中）に取り組んでおり、ページを読み込もうとしたときに次のエラーメッセージが表示され続けます：.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に含まれていたので、どこからエラーが発生しているのか、それを解決する方法がわかりません。これをクリアする上での助けがあれば幸いです。