需求：Hero列表里每一個元素都有一個刪除按鈕，點擊即可刪除。

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

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

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

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

(2) 調(diào)用http client實現(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)文章，請關(guān)注公眾號"汪子熙":

總結(jié)

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

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