使用Angular2 / Typescript访问存储在地图内部的数据的问题

Question

我目前遇到一个奇怪的问题，即当在另一个函数中调用列表时，存储在地图内部的对象将返回未定义的状态。

这是我的代码：

import { Character } from './models/character.model';
import { Injectable } from '@angular/core';
import { Race } from './models/race.model';

interface Races {
    [id: number]: Race;
}

@Injectable()
export class CharacterService {

private base: string;
private races: Races = [];

constructor(public apiKey: string, public location: string = 'us', public locale: string = 'en_us') {
    this.base = `https://${location}.api.battle.net/wow`;
    this.loadRaceData();
}

private getQueryParams() {
    return `locale=${this.locale}&apikey=${this.apiKey}`;
}

 public async loadRaceData() {
    const data = await (await fetch(`${this.base}/data/character/races?${this.getQueryParams()}`)).json();
    for (let gameRace of data.races) {
        let race: Race = gameRace;
        this.races[gameRace.id] = race;
    }
}

public async getCharacter(username: string, realm: string): Promise<Character> {
  const data = await (await fetch(`${this.base}/character/${realm}/${username}?${this.getQueryParams()}`)).json();
  const character: Character = {
      name: data.name,
      realm: data.realm,
      class: data.class,
      race: this.races[data.race],
      gender: data.gender,
      level: data.level,
      achievementPoints: data.achievementPoints,
      thumbnail: data.thumbnail,
      faction: data.faction,
   };
   return character;
  }
}

因此基本上，种族对象返回的字符是未定义的，但是数据在那里，我在做什么错了？

预期结果应该是返回该种族的数据。