add less 6 herro update
This commit is contained in:
parent
033b12ef11
commit
b8d35150a4
|
@ -1,12 +1,11 @@
|
|||
<div *ngIf="hero">
|
||||
|
||||
<button type="button" (click)="goBack()">go back</button>
|
||||
|
||||
<h2>{{hero.name | uppercase}} Details</h2>
|
||||
<div><span>id: </span>{{hero.id}}</div>
|
||||
<div>
|
||||
<label for="hero-name">Hero name: </label>
|
||||
<input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button type="button" (click)="goBack()">go back</button>
|
||||
<button type="button" (click)="save()">save</button>
|
||||
|
|
|
@ -39,4 +39,11 @@ export class HeroDetailComponent {
|
|||
.subscribe(hero => this.hero = hero);
|
||||
}
|
||||
|
||||
save(): void {
|
||||
if (this.hero) {
|
||||
this.heroService.updateHero(this.hero)
|
||||
.subscribe(() => this.goBack());
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import { Hero } from './hero';
|
|||
import { HEROES } from './mock-heroes';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { MessageService } from './message.service';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { catchError, map, tap } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
|
@ -14,24 +14,39 @@ export class HeroService {
|
|||
|
||||
private heroesUrl = 'api/heroes'; // URL to web api
|
||||
|
||||
httpOptions = {
|
||||
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
|
||||
};
|
||||
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
private messageService: MessageService)
|
||||
{ }
|
||||
|
||||
/** GET heroes from the server */
|
||||
getHeroes(): Observable<Hero[]> {
|
||||
return this.http.get<Hero[]>(this.heroesUrl)
|
||||
.pipe(
|
||||
catchError(this.handleError<Hero[]>('getHeroes', []))
|
||||
return this.http.get<Hero[]>(this.heroesUrl)
|
||||
.pipe(
|
||||
tap(_ => this.log('fetched heroes')),
|
||||
catchError(this.handleError<Hero[]>('getHeroes', []))
|
||||
);
|
||||
}
|
||||
|
||||
/** GET hero by id. Will 404 if id not found */
|
||||
getHero(id: number): Observable<Hero> {
|
||||
const url = `${this.heroesUrl}/${id}`;
|
||||
return this.http.get<Hero>(url).pipe(
|
||||
tap(_ => this.log(`fetched hero id=${id}`)),
|
||||
catchError(this.handleError<Hero>(`getHero id=${id}`))
|
||||
);
|
||||
}
|
||||
|
||||
getHero(id: number): Observable<Hero> {
|
||||
// For now, assume that a hero with the specified `id` always exists.
|
||||
// Error handling will be added in the next step of the tutorial.
|
||||
const hero = HEROES.find(h => h.id === id)!;
|
||||
this.messageService.add(`HeroService: fetched hero id=${id}`);
|
||||
return of(hero);
|
||||
/** PUT: update the hero on the server */
|
||||
updateHero(hero: Hero): Observable<any> {
|
||||
return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
|
||||
tap(_ => this.log(`updated hero id=${hero.id}`)),
|
||||
catchError(this.handleError<any>('updateHero'))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue