From ceadf3338f3c430c0d2f57816585d824595fc7f0 Mon Sep 17 00:00:00 2001 From: Wolfgang Hottgenroth Date: Fri, 15 Jan 2021 12:23:25 +0100 Subject: [PATCH] error handling in ui --- .../src/app/dashboard/dashboard.component.ts | 9 +++++++-- .../app/hero-detail/hero-detail.component.ts | 20 ++++++++++++++----- .../src/app/hero.service.ts | 6 +++--- 3 files changed, 25 insertions(+), 10 deletions(-) diff --git a/tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts b/tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts index 441f17a..b99f8ed 100644 --- a/tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts +++ b/tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Hero } from '../hero'; import { HeroService } from '../hero.service'; +import { MessageService } from '../message.service'; @Component({ selector: 'app-dashboard', @@ -10,14 +11,18 @@ import { HeroService } from '../hero.service'; export class DashboardComponent implements OnInit { heroes: Hero[] = []; - constructor(private heroService: HeroService) { } + constructor(private heroService: HeroService, private messageService: MessageService) { } ngOnInit(): void { this.getHeroes(); } async getHeroes(): Promise { - this.heroes = await this.heroService.getHeroes() + try { + this.heroes = await this.heroService.getHeroes(); + } catch (err) { + this.messageService.add(JSON.stringify(err, undefined, 4)) + } } } diff --git a/tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts b/tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts index 3635dc5..7d53657 100644 --- a/tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts +++ b/tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts @@ -4,6 +4,7 @@ import { Location } from '@angular/common'; import { Hero } from '../hero'; import { HeroService } from '../hero.service'; +import { MessageService } from '../message.service'; @Component({ selector: 'app-hero-detail', @@ -14,22 +15,31 @@ export class HeroDetailComponent implements OnInit { @Input() hero: Hero; - constructor(private route: ActivatedRoute, private heroService: HeroService, private location: Location) { } + constructor(private route: ActivatedRoute, private heroService: HeroService, private location: Location, private messageService: MessageService) { } ngOnInit(): void { this.getHero(); } async getHero(): Promise { - const id = +this.route.snapshot.paramMap.get('id'); - this.hero = await this.heroService.getHero(id) + try { + const id = +this.route.snapshot.paramMap.get('id'); + this.hero = await this.heroService.getHero(id) + } catch (err) { + this.messageService.add(JSON.stringify(err, undefined, 4)) + } } goBack(): void { this.location.back(); } - save(): void { - // this.heroService.updateHero(this.hero).subscribe(() => this.goBack()); + async save(): Promise { + try { + await this.heroService.updateHero(this.hero) + this.goBack() + } catch (err) { + this.messageService.add(JSON.stringify(err, undefined, 4)) + } } } diff --git a/tools/app/angular-tour-of-heroes/src/app/hero.service.ts b/tools/app/angular-tour-of-heroes/src/app/hero.service.ts index f865f4d..53eb6e4 100644 --- a/tools/app/angular-tour-of-heroes/src/app/hero.service.ts +++ b/tools/app/angular-tour-of-heroes/src/app/hero.service.ts @@ -18,11 +18,11 @@ export class HeroService { getHero(id: number): Promise { this.messageService.add(`HeroService: fetch hero id=${id}`); - return this.http.get(`http://172.16.3.185:5000/hero?id=${id}`).toPromise() + return this.http.get(`http://172.16.3.185:5000/hero/${id}`).toPromise() } - updateHero(hero: Hero): Observable { + updateHero(hero: Hero): Promise { this.messageService.add(`HeroService: save change: id=${hero.id}, name=${hero.name}`); - return of(true); + return this.http.put(`http://172.16.3.185:5000/hero/${hero.id}`, hero).toPromise() } }