Pfthb

I need to get team in my PlayerComponent class. When I use this line of code:

this.teamId = this.player.teamId;

I get "ERROR TypeError: Cannot read property 'teamId' of undefined".

I use this code in html to retrieve team name from team object.

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

Why is this happening? My player loads correctly.

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

That's because you are loading the team before the player is loaded. Keep in mind that http requests working asynchronously.

To solve your problem you can put the this.loadTeam() inside the subscription of the getPlayer() function.

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