使用Angular HTTP client对数据模型进行创建操作

需求：在Hero列表里增添创建hero的UI，点击Add按钮之后，可以创建新的Hero：

实现步骤：

(1) 在hero Component上绘制用于新建hero的UI：

<div>
  <label>Hero name:
    <input #heroName />
  label>
  
  <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 {
  return this.http.post(this.heroesUrl, hero, this.httpOptions).pipe(
    tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
    catchError(this.handleError('addHero'))
  );
}

要获取更多Jerry的原创文章，请关注公众号"汪子熙":