Question

我知道这是一个非常常见的话题，但是我陷入了困境，我无法理解所有解决方案。

我有一个Angular 6应用程序，该应用程序调用Java Spring中的API来查询数据库。

我的问题是，例如在一页上，我不得不在组件上多次查询数据库。

nbOnInit（）执行getGames（），getTasks（）和getGlobalProgress（）。

第一个问题是getGames（）晚了，在chrome控制台中，我遇到了几个问题，例如“无法读取未定义的属性'title'的未定义”（这是Game类型的属性），以及何时使用Games []终于解决了，它应该显示。我该如何抑制这些错误？

第二个问题是，在getGlobalProgress（）中，我需要this.progress，这在先前的getTasks（）中会受到影响。但是getTasks（）又来不及了，并且从未设置this.globalProgress ...

我想我需要某种异步调用，例如promise或observable，我认为“ .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);
}

角度，承诺或可观察的异步调用

0 个答案: