analys

src/app/app.config.ts

@@ -1,15 +1,16 @@
 import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService } from './in-memory-data.service';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideBrowserGlobalErrorListeners(),
+    //provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     provideRouter(routes),
-    importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, {delay:150}))
+    importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, {delay:150})),
+    provideHttpClient()
   ]
 };

src/app/dashboard/dashboard.component.ts

@@ -17,6 +17,7 @@ export class DashboardComponent implements OnInit {
 
   ngOnInit(): void {
     this.getHeroes();
+    console.log(this.heroes)
   }
 
   getHeroes(): void {

src/app/hero-detail/hero-detail.component.html

@@ -1,7 +1,4 @@
 <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>
@@ -10,3 +7,5 @@
   </div>
 
 </div>
+<button type="button" (click)="goBack()">go back</button>
+<button type="button" (click)="save()">save</button>

src/app/hero-detail/hero-detail.component.ts

@@ -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());
+    }
+  }
+
 }

src/app/hero.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { Hero } from './hero';
-import { HEROES } from './mock-heroes';
 import { catchError, Observable, of, tap } from 'rxjs';
 import { MessageService } from './message.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
@@ -10,29 +9,25 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 })
 
 export class HeroService {
+  
+httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
 
   constructor(
   private http: HttpClient,
   private messageService: MessageService) { }
 
-  /*getHeroes(): Observable<Hero[]> {
-    const heroes = of(HEROES);
-    this.messageService.add('HeroService: fetched heroes');
-    return heroes;
-  } */
-  
 
   /** GET heroes from the server */
   getHeroes(): Observable<Hero[]> {
       return this.http.get<Hero[]>(this.heroesUrl)
       .pipe(
-        tap(_ => this.log('fetched heroes')),
+        tap(h => this.log(JSON.stringify(h))),
         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}`;
@@ -46,6 +41,7 @@ export class HeroService {
   private log(message: string) {
     this.messageService.add(`HeroService: ${message}`);
   }
+  
   private heroesUrl = 'api/heroes';  // URL to web api
 
   /**
@@ -55,19 +51,28 @@ export class HeroService {
  * @param operation - name of the operation that failed
  * @param result - optional value to return as the observable result
  */
-private handleError<T>(operation = 'operation', result?: T) {
-  return (error: any): Observable<T> => {
+  private handleError<T>(operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
 
-    // TODO: send the error to remote logging infrastructure
-    console.error(error); // log to console instead
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
 
-    // TODO: better job of transforming error for user consumption
-    this.log(`${operation} failed: ${error.message}`);
+      // TODO: better job of transforming error for user consumption
+      this.log(`${operation} failed: ${error.message}`);
 
-    // Let the app keep running by returning an empty result.
-    return of(result as T);
-  };
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
+
+  }
+
+  /** 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'))
+  );
 }
-
+  
 
 }

src/app/heroes/heroes.component.ts

@@ -3,7 +3,6 @@ import { Hero } from '../hero';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HeroService } from '../hero.service'; //новая библиотека добавлена вместо HEROES
-import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
 import { MessageService } from '../message.service';
 import { RouterLink } from '@angular/router';
 
@@ -26,8 +25,6 @@ export class HeroesComponent implements OnInit {
     this.getHeroes();
   }
 
-  
-
   getHeroes(): void {
     this.heroService.getHeroes()
         .subscribe(heroes => this.heroes = heroes);