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

實現(xiàn)步驟：

(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函數(shù)的實現(xiàn)：

add(name: string): void {name = name.trim();if (!name) { return; }this.heroService.addHero({ name } as Hero).subscribe(hero => {this.heroes.push(hero);});}

(2) 實現(xiàn)Hero Service的addHero函數(shù)：

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的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

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