使用Angular HTTP client对数据模型进行update操作

需求：在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操作相关推荐

使用Angular HTTP client对数据模型进行删除操作
需求:Hero列表里每一个元素都有一个删除按钮,点击即可删除. (1) hero列表的UI上,每个li元素内增添一个删除按钮. delete函数的实现: 不仅删除Component本身heroes属性 ...
使用Angular HTTP client对数据模型进行创建操作
需求:在Hero列表里增添创建hero的UI,点击Add按钮之后,可以创建新的Hero: 实现步骤: (1) 在hero Component上绘制用于新建hero的UI: <div>< ...
matlab可以对多张表同时操作吗,update操作多张表
sql 语句多张表UPDATE用法一.当用一个表中的数据来更新另一个表中的数据,T-SQL提供多种写法(下面列出了二种),但建议用第一种写法,虽然传统,但结构清晰.飞.飞Asp技术乐园并且要注意, ...
使用JPA进行Update操作 @Query注解的用法，JPL
使用jpa进行update操作有两种,第一种就是先查询,set,再进行save更新.这种做法过于繁杂,我只是要进行一个更新操作却变成了三步,所以我推荐使用第二种: @Modifying @Query( ...
使用JPA进行update操作时，报org.springframework.beans.factory.BeanCreationException: Error creating bean with
使用JPA进行update操作时,报org.springframework.beans.factory.BeanCreationException: Error creating bean with ...
mysql update操作
update语法 Single-table语法: UPDATE [LOW_PRIORITY] [IGNORE] tbl_name SET col_name1=expr1 [, col_name2=ex ...
oracle update 数据库恢复,ORACLE update 操作内部原理
对于oracle的update操作,在数据块中具体是如何出来,是直接更新原来值,还是通过插入新值修改指针的方法实现.下面通过证明: 模拟表插入数据 SQL> create table t_xif ...
Mongodb的update操作
在前面的文章"mongodb 查询的语法"里,我介绍了Mongodb的常用查询语法,Mongodb的update操作也有点复杂,我结合自己的使用经验,在这里介绍一下,给用mongo ...
Oracle 大规模 delete，update 操作注意事项
一. 说明如果对大表进行大规模的delete 和update,那么可以注意一下如下说明: (1) 查看执行计划,如果说删除的记录很多,走索引的成本会比全表扫描更大,因为更新数据时还需要做一些约束校 ...

使用Angular HTTP client对数据模型进行update操作

使用Angular HTTP client对数据模型进行update操作相关推荐

最新文章

热门文章