Асинхронные вызовы в угловых, обещаниях или наблюдаемых

Question

Я понимаю, что это очень распространенная тема, но я застрял и не могу понять все решение.

У меня есть приложение Angular 6, которое вызывает API в Java Spring для запроса базы данных.

Моя проблема, например, на одной странице мне нужно несколько раз запросить базу данных по компоненту.

nbOnInit () выполняет getGames(), getTasks() и getGlobalProgress().

Первая проблема заключается в том, что getGames () опаздывает, и в консоли chrome у меня есть несколько проблем, например, "Не удается прочитать свойство title of undefined" (которое является свойством типа Game), и когда Games[] наконец, решено, он отображается как следует. Как я могу подавить эти ошибки?

Вторая проблема заключается в том, что в getGlobalProgress () мне нужен this.progress, который ранее упоминался в getTasks (). Но getTasks () снова опаздывает, и this.globalProgress никогда не устанавливается...

Я думаю, мне нужны какие-то асинхронные вызовы, такие как обещания или наблюдаемые, я думал, что ".subscribe" было достаточно, но я ошибался. Я нашел много примеров кода в Интернете, но я не могу понять, какой использовать, или как его использовать. Буду признателен за помощь, большое спасибо.

Вот файл ts соответствующего компонента:

export class SingleGameComponent implements OnInit {

private game: Game[];
private tasks: Task[];
private progress: Progress[];
private globalProgress: number;
private id: any; // Game id

constructor(private gameService: GameService, 
            private route: ActivatedRoute,
            private taskService: TaskService,
            private progressService: ProgressService) { }

ngOnInit() {
  this.id = this.route.snapshot.params['id'];
  this.getGames();
  this.getTasks();
  this.getGlobalProgress();
}

getGames(): void {
  this.gameService.getGameById(+this.id)
    .subscribe(game => this.game = game);
}

getTasks(): void{
  this.taskService.getTasksByGameId(+this.id)
    .subscribe(task => this.tasks = task);

  this.progressService.getProgressByUserAndGame(JSON.parse(localStorage.getItem('currentUser')).id, +this.id)
  .subscribe(progress => this.progress = progress);
}

getGlobalProgress(): void{
  this.progressService.calculateGlobalProgress(this.progress)
  .subscribe(globalProgress => this.globalProgress = globalProgress);
}

}

Вот один из методов сервиса (они все одинаковые):

    getGameById(id: number){
  return this.httpClient.get<Game[]>(this.BASE_URL+'game/id/'+id);
}