需求：在Hero列表里增添創建hero的UI，點擊Add按鈕之后，可以創建新的Hero：

實現步驟：

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

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

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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