Угловая переменная равна NaN или не определена

Question

Мне нужно собрать команду в своем классе PlayerComponent. Когда я использую эту строку кода:

this.teamId = this.player.teamId;

Я получаю сообщение "ОШИБКА TypeError: Не удается прочитать свойство 'teamId' из неопределенного".

Я использую этот код в html для получения названия команды из объекта команды.

<p>Team:  {{ team?.name }}</p>

Почему это происходит? Мой плеер загружается правильно.

export class PlayerComponent implements OnInit {
  player: Player;
  playerId: number;
  team: Team;
  teamId: number;

  constructor(private playerService: PlayerService, private teameService: TeamService, private alertify: AlertifyService,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.loadPlayer();
    this.loadTeam();
  }

  loadPlayer() {
    this.playerId = this.route.snapshot.params['id'];
    this.playerService.getPlayer(+this.playerId).subscribe((player: Player) => {
      this.player = player;
    }, error => {
      this.alertify.error(error);
    });
  }

  loadTeam() {
    this.teamId = this.player.teamId;
    this.teameService.getTeam(+this.teamId).subscribe((team: Team) => {
      this.team = team;
    }, error => {
      this.alertify.error(error);
    });
  }
}

Answer 1

Это потому, что вы загружаете команду до загрузки игрока. Помните, что http-запросы работают асинхронно.

Чтобы решить вашу проблему, вы можете поместить this.loadTeam() в подписку функции getPlayer ().

export class PlayerComponent implements OnInit {
  player: Player;
  playerId: number;
  team: Team;
  teamId: number;

  constructor(private playerService: PlayerService, private teameService: TeamService, private alertify: AlertifyService,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.loadPlayer();
  }

  loadPlayer() {
    this.playerId = this.route.snapshot.params['id'];


this.playerService.getPlayer(+this.playerId).subscribe((player: Player) => {
      this.player = player;
      this.loadTeam();
    }, error => {
      this.alertify.error(error);
    });
  }

  loadTeam() {
    this.teamId = this.player.teamId;

this.teameService.getTeam(+this.teamId).subscribe((team: Team) => {
      this.team = team;
    }, error => {
      this.alertify.error(error);
    });
  }
}