用户登录

在 My List 页面上显示的这个内容列表项目里面可以再添加一个 Remove 按钮,点击这个按钮可以从 My List 里面删除掉当前这个数据项目。

回到项目,这个删除的动作也可以放在一个服务里面,打开 PostService 服务,在里面添加一个方法,名字是 removeItemFromList ,方法接收一个 entityId 这个参数,参数的类型是 number,这个 entityID 应该就是要删除掉的数据项目的 Id 号。

方法 return 一下,执行 this.http 上面的 delete ,对指定的接口发生一个 DELETE 请求,请求的接口地址是 this.myListApi 斜线,后面加上要删除掉的项目的 Id 号。

组件

打开 MyListComponent 组件,在这个组件里再添加一个方法,名字也可以叫 removeItemFromList,方法接收一个 entityId ,类型是 number,方法里面,用一下 this.postService 上面的 removeFromList ,把要删除的项目的 Id 号交给这个服务上的方法,这个方法会返回 Observable,所以可以用一下 subscribe 订阅一下它。

如果不执行它上面的 subscribe 订阅的话,这个 Observable 上面不会生产出数据。

提供一个方法参数,里面可以设置一下 this.entities 的值,它的值用一下 this.entities.filter 过滤出一些数据项目,item ,item.id 不等于 entityId 。

意思就是,从 this.entities 里面,过滤出,或者叫筛选出,除了被删除掉的那个数据项目以外的数据项目。

视图

再打开这个组件的模板文件,在它的模板文件里面,添加一个删除按钮,放在一个段落里面,按钮元素是 button,按钮上的文字是 Remove。

给它绑定一个 click 事件,点击这个按钮,就执行一下这个组件里的 removeItemFromList 这个方法,把 entity 的 id 交给它。

预览

回到浏览器试一下这个功能。打开 My List, 找到从这个列表里删除掉的内容项目,按一下项目上的 Remove 按钮。这样会用 Http 客户端上的 delete 方法,请求服务端接口,从服务端的数据库里删除掉了对应的这个项目。

再把最后这个项目也删除掉。现在 db.json 里的 my-list 里面就没有东西了。

打开 Posts 页面,可以在内容列表里面,再找几个项目,按一下 Add to List,点击这个按钮会用 Http 客户端上的方法,把这个数据项目发给 my-list 这个接口。 这个接口会存储从前端那里发送过来的数据。

再打开 My List 页面,在这个页面上会显示 my-list 里的数据项目。

DELETE:删除数据的请求《 Angular:请求 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点