I am currently using Angular to create a video game page. When a specific title is clicked, the id is sent to make an API call with that specific id. I am able to retrieve the data in the selected-games component where I intend to use it, but when I use ngFor, nothing is shown – no errors and no data.
The home component is where you can select a specific video game. I tried adding setTimeout and routing to this TypeScript file, hoping to delay the routing until the array in the selected-game-component is loaded, but it did not work.
constructor(private getGame: SelectedGameComponent, private router: Router) { }
ngOnInit(): void {
}
sendId(id: any){
// this.gamesService.functionGetGameById(id);
this.getGame.test(id);
setTimeout(() => {
this.router.navigateByUrl('game');
}, 5000);
}
}
In the selected game component, I am attempting to map the data in the HTML file.
game: any = [];
constructor(private getGames: FetchingVideoGamesService) { }
test(id: any){
this.getGames.functionGetGameById(id).subscribe(response =>{
this.game = response;
console.log(this.game);
});
}
}
And now, the fetching service:
functionGetGameById(id: any){
return this.http.get<any>('https://api.rawg.io/api/games/'+id+'?key=keyremovedforpost')
.pipe(map(response =>{
const gameArray: any = [];
gameArray.push(response);
console.log(gameArray, 'response from service');
return gameArray[0];
}));
}