Question

我正在开发我的第一个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'.

错误发生在我的./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
      }
    }
  ));
}

作为参考，如果它有帮助，这里是我的主要组件及其模板，它使用该服务加载Pokemon数据：

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

将函数传递给map，其中p和i都在其范围内定义。

在你的情况下，你正在映射另一个地图的结果（它返回一个数组），所以你想要如下构造数组：

.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

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

2 个答案: