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

Question

我正在做我的第一个 Angular2 项目(构建一个口袋妖怪网络应用程序(，在尝试加载页面时不断收到以下错误消息：

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

我已经用我正在映射的数组中的当前项目的参数和该项目的索引调用了我的 map 函数的回调，然后在 getTypes 的函数定义中包含两者的形式参数，所以我不确定错误来自哪里或如何解决它。非常感谢任何帮助来解决这个问题。

Answer 1

您没有定义参数p或i。

您要做的是：

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

将一个函数传递给在其作用域中同时定义了 p 和 i 的函数map。

在您的情况下，您正在映射另一个映射(返回一个数组(的结果，因此您需要按如下方式解构数组：

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

这将获取数组并为您拆分变量赋值。与执行相同：

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

但更简洁。

Answer 2

我认为应该是

).map(v => getTypes(v.name, v.id))); // <-- error occurs here