学习目标

接续 Day10 的内容。
主要的内容是学如何更新和删除既有的英雄资料。

更新英雄资料

目标功能是在修改完英雄名称後，透过按下储存按钮，将修改完的内容回传到服务器中，将旧有的资料覆写掉。

--- hero-detail.component.ts ---
import { HERO } from '../hero';
import { HeroService } from '../hero.service';
@Component({
  // ...
})
export class HeroDetailComponent implements OnInit { 
  constructor(private heroService:HeroService) { }
  save(): void {
    if (this.hero) {
      this.heroService.updateHero(this.hero)
        .subscribe(() => this.goBack());
    }
  }
}

在 heroDetailComponent 元件中，引入了 heroService 的服务，并新增的储存英雄资料的函式，将要被储存的英雄资料传入 heroService 的 updateHero 函式中。

--- hero.service.ts --- 
httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

updateHero(hero: Hero): Observable<any> {
  return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
    catchError(this.handleError<any>('updateHero'))
  );
}

在 heroService 这边，因为 put 方法，需要 header ，所以，我们会先定义一个 httpOptions 变数，里面会包一个 headers 的属性，接着，再将它传入到 put 的第三个参数中。
而 updateHero 方法就是将传入的英雄资料，传到指定的 heroesUrl 目的地。

新增英雄资料

我们会利用 http.post 的方法，来将欲新增的英雄资料推到资料库中。
先在 hero 元件中呼叫 post 方法来新增资料库的内容，接着，再将新增的内容推到阵列当中。
它一样是需要三个参数，这个三个参数跟 http.put 的三个一样，这边就不再赘述了。

--- heroes.component.ts ---
add(name: string): void {
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name } as HERO) // 将新增的英雄资料丢到 addHero 函式中
    .subscribe((hero:HERO) => {
      this.heroes.push(hero);  // 在 post 完成之後，将新增的英雄推进英雄阵列中
    });
}

在 heroComponent 元件中，新增了新增英雄资料的函式 add。

--- hero.service.ts --- 
addHero(hero: HERO): Observable<HERO> {
    return this.http.post<HERO>(this.heroesUrl, hero, this.httpOptions).pipe(
      catchError(this.handleError<HERO>('addHero'))
    );
  }

在 heroService 档案将传入的新增英雄资料 post 到资料库中。

删除英雄资料

目标功能就是删除某个英雄资讯。

--- heroes.component.ts ---
delete(hero: Hero): void {
  this.heroes = this.heroes.filter(h => h !== hero);
  this.heroService.deleteHero(hero.id).subscribe();
}

这边的操作事先将其他非指定被删除的资料重新存到 heroes 阵列中。

Note:
要特别注意一下，在 deleteHero 结束之後，有接一个没有执行任何内容的 subscribe。
官方文件特别提到，只要是回传 Observable 实例，後面一定要接 subscribe。不然，这个回传的 Observable 不会执行任何内容，直到遇到下一个 subscribe 的时候，才会执行它。

接着，再将指定删除的英雄的 id 传入删除的函式中。

--- hero.service.ts ---
deleteHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;

  return this.http.delete<Hero>(url, this.httpOptions).pipe(
    catchError(this.handleError<Hero>('deleteHero'))
  );
}

Summary

这边做个总结

1. 由本篇可以知道怎麽在 Angular 中，实作 CURD 的方法。
2. 知道怎麽将制作好的 header 内容，传入到 put, post 这些 Http 要求方法的第三个参数中，来实现 post 和 put 的方法。