使用Restful添加、删除和修改Angular

本文介绍如何添加、删除和更改。

删除

使用删除来删除。一般在设计页面的时候，基本都是在列表页面上操作。首先，为删除的链接添加一个函数，因为一般来说，只要后端api支持，就需要传入可以删除的id或名称。检查以下呼叫后，您可以看到：

因此，您只需要使用delete方法并在传入的url中指定id或名称。

删除宁静的电话：https://docs.konghq.com/0.13.x/admin-api/#delete-api

模板修改

按如下方式修改html页面

一个NZ-tooltip NZ title=' delete '(click)=' handledeletunc()' I class=' anticon anticon-减-circle-o'/I/a添加一个click处理程序

添加页面定义的点击处理程序handleDeleteFunc:

handleDeleteFunc(apiName) { this。_操作信息='删除'；this.isSpinning=truethis . modalservice . confirm({ nzTitle : ' I您确定要删除所选的这个项目吗？/i '，nzContent: '选定的api将被删除'，Nzonok :()={ this . http . delete('/API/' ApiName . ToString())。subscribe(item={ this . isspinking=false；这个。_ GetaPis()；} );} });}

添加更新视图

其他操作如添加/更新/查看，所以基本上使用get/delete/post/put

TS文件

从“@棱角分明/核心”导入{组件，在初始化时}；从" @angular/common/http "导入{HttpClient，Httpaders }；从" ng-zorro-antd "导入{ nzmodalServiCe }；导出类API model { created _ at : string strip _ uri :布尔值；id:字符串；主机：[' ']；名称：字符串；http_if_terminated:布尔值；https_only:布尔值；检索：号；preserve_host:布尔值；上游_连接_超时：号码；上游_读取_超时：号；上游_发送_时间输出：号；上游_url:字符串；} @ Component({选择器： ' app-rest-demo '，templateUrl: ' ./rest-demo.component.html '，style URL 3360[./rest-demo.component.css']})导出类RestDemoComponent实现在init { dataModel=[]上；isModalVisible=false _ actioninformation :字符串；_ dataselected : apimodelspinking=true public Httpoptions={ header RS : new Httpheaders({ ' Content-Type ' : ' application/JSON ' })}；构造函数(private http: HttpClient，private modalServiCe : nzmodalServiCe){ } ngOnInit(){ this ._ GetaPis()；这个_ initData()；} _initData() { this ._ DataSelected=new ApiModel()；这个_ dataselected。上游_连接_超时=6000；这个_ dataselected。重试次数=5次；} _ GetPis(){ this。isspinking=true这个。http。get('/API ').订阅(项目={ this。DataMoDEL=项[' data ']；this . isspinking=false })；} handleAddFunc() { this ._操作信息='添加；this . IsModalvisible=true } handleSearchFunc(ApiName){ this ._操作信息='搜索；this . http . get('/API/' APiNAME).订阅（项目={这个._ dataSelected=ApiModel项；this . isspinking=false })；this . IsModalvisible=true } handleDeleteFunc(ApiName){ this ._操作信息='删除；this . is sticking=true this。modalservice。确认({ nzTitle : ' I您确定要删除所选的这个项目吗？/i '，nzContent: '选定的美国石油学会(American Petroleum Institute)将被删除，Nzonok :()={ this。http。删除('/API/' ApiName。ToString()).订阅(项目={ this。isspinking=false这个. GetaPis()；} );} });} handleEditeFunc(apiName) { this ._操作信息='编辑；this . http . get('/API/' APiNAME).订阅（项目={这个._ dataSelected=ApiModel项；this . isspinking=false })；this . ismodalvisible=true } handleOperationCancel(){ this。ismodalvisible=false} handleOperationOk(){ this。isspinking=truethis.isModalVisible=false如果（这个_ action information===' Add '){ this。http。post('/API/'，JSON.stringify(这个._dataSelected)，this.httpOptions).订阅(项目={ this。isspinking=false这个. GetaPis()；});} else if(这个_操作信息==='编辑'){这。http。放('/API/'，JSON.stringify(这个._dataSelected)，this.httpOptions).订阅(项目={ this。isspinking=false这个. GetaPis()；});} else if(这个。_操作信息==='搜索){ } }}HTML模版

div style=' display :内联块；宽度： 50%;“NZ-面包屑样式='行高： 40px垂直对齐：中间' NZ-面包-项目操作/NZ-面包-项目NZ-面包-项目APIs/NZ-面包-项目/NZ-面包div style='显示：内联块；宽度： 45%;文本对齐：右侧；保证金-权利： 5%;线高： 40pxfont-size : xx-大号' a NZ-tooltip nzTitle=' Add '(单击)=' handleAddFunc()' I style=' text-align : right ' class=' anticon-anticon-plus-circle-o '/I/a/div brnz-table #数据源[nzData]=' dataModel '第d个名称/第th host/第th https only/第th stry Cnt/第th thUpstream URL/第th created/th thooperation/th/tr/d t正文日期3: ' yyy/MM/DD hh :MM单击)=' handleDeleteFunc(数据。名称)' I类=' anticon anticon-减-圆圈-o '/I/a NZ-分频器nzType='垂直' |/NZ-分频器一个nz-tooltip nzTitle='更新'(单击)=' handleeditefnc(数据。name)' I class=' anticon anticon-edit '/I/a NZ-input id=' id-API-retry ' name=' id-API-retry '[(ng model)]=' _ data selected。重试次数/NZ-form-control/NZ-form-item NZ-form-item NZ-form-label[NZ-SPan]=' 3 ' NZFOr=' id-API-URL ' URl/NZ-form-label-NZ-control[NZ-SPan]=' 21 '输入NZ-input id=' id-API-URl ' name=' id-API-URl '总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接