需求：Hero列表里每一個(gè)元素都有一個(gè)刪除按鈕，點(diǎn)擊即可刪除。

(1) hero列表的UI上，每個(gè)li元素內(nèi)增添一個(gè)刪除按鈕。

delete函數(shù)的實(shí)現(xiàn)：

不僅刪除Component本身heroes屬性的對(duì)應(yīng)元素，同時(shí)調(diào)用hero service刪除遠(yuǎn)端服務(wù)器上的hero資源：

注意第43行的subscribe方法是必須的，即便沒(méi)有指定任何回調(diào)函數(shù)，否則http請(qǐng)求不會(huì)發(fā)送出去。

(2) 調(diào)用http client實(shí)現(xiàn)服務(wù)器端的資源刪除：

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'))); }

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的使用Angular HTTP client对数据模型进行删除操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。