.map回调函数参数未找到错误[Angular2，JavaScript]_Javascript_Angular_Angular2 Services

.map回调函数参数未找到错误[Angular2，JavaScript]

javascript angular

.map回调函数参数未找到错误[Angular2，JavaScript],javascript,angular,angular2-services,Javascript,Angular,Angular2 Services,我正在进行我的第一个Angular2项目（构建Pokemon web应用程序），在尝试加载页面时，我不断收到以下错误消息： 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,2

我正在进行我的第一个Angular2项目（构建Pokemon web应用程序），在尝试加载页面时，我不断收到以下错误消息：

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'.

错误发生在my

/pokedex service.ts文件中，该文件从API加载数据并注入组件。以下是我的

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

我调用了map函数的回调函数，其中包含了我映射的数组中当前项的参数和该项的索引，然后在

getTypes

的函数定义中包含了这两个项的形式参数，因此我不确定错误来自何处，也不确定如何解决。非常感谢您在清除此问题时提供的任何帮助。

您没有定义参数

或

您要做的是：

.map((p, i) => getTypes(p, i));

将函数传递给

map

，该函数的作用域中同时定义了p和i

在本例中，您映射的是另一个映射的结果（该映射返回一个数组），因此您希望按如下方式分解该数组：

.map(([p, i]) => getTypes(p, i));

这将获取数组并为您拆分变量分配。与执行以下操作相同：

   .map(arr => {
        const p = arr.p;
        const i = arr.i;
        return getTypes(p, i);
    });

但是要简洁得多。