使用Angular HTTP client對資料模型進行建立操作

需求：在Hero清單裡增添建立hero的UI，點選Add按鈕之後，可以建立新的

實作步驟：

(1) 在hero Component上繪制用于建立hero的UI：

<div>
  <label>Hero name:
    <input #heroName />
  </label>
  <!-- (click) passes input value to add() and then clears the input -->
  <button (click)="add(heroName.value); heroName.value=''">
    add
  </button>
</div>      

add函數的實作：

add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }      

(2) 實作Hero Service的addHero函數：

addHero(hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
    tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
    catchError(this.handleError<Hero>('addHero'))
  );
}      

：