使用Angular HTTP client对数据模型进行删除操作

时间:2022-07-23
本文章向大家介绍使用Angular HTTP client对数据模型进行删除操作，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

需求：Hero列表里每一个元素都有一个删除按钮，点击即可删除。

(1) hero列表的UI上，每个li元素内增添一个删除按钮。

delete函数的实现：

不仅删除Component本身heroes属性的对应元素，同时调用hero service删除远端服务器上的hero资源：

注意第43行的subscribe方法是必须的，即便没有指定任何回调函数，否则http请求不会发送出去。

(2) 调用http client实现服务器端的资源删除：

deleteHero(hero: Hero | number): Observable<Hero> {
  const id = typeof hero === 'number' ? hero : hero.id;
  const url = `${this.heroesUrl}/${id}`;

  return this.http.delete<Hero>(url, this.httpOptions).pipe(
    tap(_ => this.log(`deleted hero id=${id}`)),
    catchError(this.handleError<Hero>('deleteHero'))
  );
}

随机文章
Javascript知识点必读
最近更新