需求：在hero列表里點擊某個hero，進入明細頁面：

在明細頁面里修改hero name，點擊save后，再回到hero列表，期望detail頁面做的修改能夠持久化。

下面是具體做法：

(1) hero detail Component的html里，新增一個按鈕，綁定click事件的處理函數為save：

detail Component的hero屬性，需要加上@Input annotation：

save函數的實現：

save(): void {this.heroService.updateHero(this.hero).subscribe(() => this.goBack());}

具體的保存，是轉交給Hero service實現。

(2) hero service里updateHero函數的實現：

updateHero(hero: Hero): Observable<any> {return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(tap(_ => this.log(`updated hero id=${hero.id}`)),catchError(this.handleError<any>('updateHero'))); }

httpOptions的值：

httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' })};

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。