上篇文章中讲解了增删改查中的查，这篇来看一下如何进行增删改。

删除

使用delete进行删除，一般页面设计的时候也基本都是在列表页进行操作的。首先为删除的链接添加一个函数，因为一般删除都需要传入可定位删除的id或者name，前提是后端api是否支持，查看如下的调用之后，可以看到：

所以，只需要method使用delete，在传入的url中指定id或者name即可。

删除的restful调用：https://docs.konghq.com/0.13.x/admin-api/#delete-api

模版修改

html页面做如下修改

<a nz-tooltip nzTitle="Delete" (click)="handleDeleteFunc()"><i class="anticon anticon-minus-circle-o"></i></a>

添加click处理函数

添加页面定义的click处理函数handleDeleteFunc：

  handleDeleteFunc(apiName) {this._actionInformation = 'Delete';this.isSpinning = true;this.modalService.confirm({nzTitle  : '<i>Are you sure to delete this item selected?</i>',nzContent: '<b>The api selected will be deleted.</b>',nzOnOk   : () => {this.http.delete('/apis/' + apiName.toString()).subscribe(item => {this.isSpinning = false;this._getApis();});}});}

添加&更新&查看

其他操作诸如添加/更新/查看, 这样基本上get/delete/post/put都进行了使用

TS文件

import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { NzModalService } from 'ng-zorro-antd';export class ApiModel {created_at: string;strip_uri: boolean;id: string;hosts: [''];name: string;http_if_terminated: boolean;https_only: boolean;retries: number;preserve_host: boolean;upstream_connect_timeout: number;upstream_read_timeout: number;upstream_send_timeout: number;upstream_url: string;
}@Component({selector: 'app-rest-demo',templateUrl: './rest-demo.component.html',styleUrls: ['./rest-demo.component.css']
})
export class RestDemoComponent implements OnInit {dataModel = [];isModalVisible = false;_actionInformation: string;_dataSelected: ApiModel;isSpinning = true;public httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' })};constructor(private http: HttpClient,private modalService: NzModalService) {}ngOnInit() {this._getApis();this._initData();}_initData() {this._dataSelected = new ApiModel();this._dataSelected.upstream_connect_timeout = 6000;this._dataSelected.retries = 5;}_getApis() {this.isSpinning = true;this.http.get('/apis').subscribe(item => {this.dataModel = item['data'];this.isSpinning = false;});}handleAddFunc() {this._actionInformation = 'Add';this.isModalVisible = true;}handleSearchFunc(apiName) {this._actionInformation = 'Search';this.http.get('/apis/' + apiName).subscribe(item => {this._dataSelected = <ApiModel> item;this.isSpinning = false;});this.isModalVisible = true;}handleDeleteFunc(apiName) {this._actionInformation = 'Delete';this.isSpinning = true;this.modalService.confirm({nzTitle  : '<i>Are you sure to delete this item selected?</i>',nzContent: '<b>The api selected will be deleted.</b>',nzOnOk   : () => {this.http.delete('/apis/' + apiName.toString()).subscribe(item => {this.isSpinning = false;this._getApis();});}});}handleEditeFunc(apiName) {this._actionInformation = 'Edit';this.http.get('/apis/' + apiName).subscribe(item => {this._dataSelected = <ApiModel> item;this.isSpinning = false;});this.isModalVisible = true;}handleOperationCancel() {this.isModalVisible = false;}handleOperationOk() {this.isSpinning = true;this.isModalVisible = false;if (this._actionInformation === 'Add') {this.http.post('/apis/', JSON.stringify(this._dataSelected), this.httpOptions).subscribe( item => {this.isSpinning = false;this._getApis();});} else if (this._actionInformation === 'Edit') {this.http.put('/apis/', JSON.stringify(this._dataSelected), this.httpOptions).subscribe( item => {this.isSpinning = false;this._getApis();});} else if (this._actionInformation === 'Search') {}}
}

HTML模版

<div style="display:inline-block;width: 50%;">
<nz-breadcrumb style="line-height: 40px; vertical-align: middle"><nz-breadcrumb-item>Operations</nz-breadcrumb-item><nz-breadcrumb-item>Apis</nz-breadcrumb-item>
</nz-breadcrumb>
</div><div style="display:inline-block;width: 45%;text-align: right;margin-right: 5%; line-height: 40px; font-size: xx-large"><a nz-tooltip nzTitle="Add" (click)="handleAddFunc()"> <i style="text-align: right" class="anticon anticon-plus-circle-o"></i> </a>
</div>
<br>
<nz-table #dataSource [nzData]="dataModel"><thead><tr><th>Name</th><th>Host</th><th>Https only</th><th>Retry Cnt</th><th>Upstream url</th><th>Created</th><th>Operation</th></tr></thead><tbody><tr *ngFor="let data of dataSource.data"><td>{{data.name}}</td><td>{{data.hosts}}</td><td>{{data.https_only}}</td><td>{{data.retries}}</td><td>{{data.upstream_url}}</td><td>{{data.created_at | date:'yyyy/MM/dd HH:MM:SS'}}</td><td><a nz-tooltip nzTitle="Delete" (click)="handleDeleteFunc(data.name)"><i class="anticon anticon-minus-circle-o"></i></a><nz-divider nzType="vertical">|</nz-divider><a nz-tooltip nzTitle="Update" (click)="handleEditeFunc(data.name)"><i class="anticon anticon-edit"></i></a><nz-divider nzType="vertical">|</nz-divider><a nz-tooltip nzTitle="Retrieve" (click)="handleSearchFunc(data.name)"><i class="anticon anticon-exclamation-circle-o"></i></a></td></tr></tbody></nz-table><nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isModalVisible" nzTitle="Api Detail (Operation: {{_actionInformation}})" (nzOnCancel)="handleOperationCancel()" (nzOnOk)="handleOperationOk()"><form nz-form><nz-form-item><nz-form-label nzRequired [nzSpan]="3" nzFor="id-api-name">Name</nz-form-label><nz-form-control [nzSpan]="9"><input nz-input name='id-api-name' id='id-api-name' [(ngModel)]=_dataSelected.name></nz-form-control><nz-form-label [nzSpan]="3" nzFor="id-api-host">Host</nz-form-label><nz-form-control [nzSpan]="9"><input nz-input name="id-api-host" id="id-api-host" [(ngModel)]='_dataSelected.hosts'></nz-form-control></nz-form-item ><nz-form-item><nz-col [nzSpan]="3" ></nz-col><nz-col [nzSpan]="9"><label name="id-api-https" nz-checkbox [(ngModel)]="_dataSelected.https_only">Https</label></nz-col><nz-form-label [nzSpan]="3" nzFor="id-api-retry">Retry</nz-form-label><nz-form-control [nzSpan]="9"><input nz-input id="id-api-retry" name="id-api-retry" [(ngModel)]="_dataSelected.retries"></nz-form-control></nz-form-item ><nz-form-item><nz-form-label [nzSpan]="3" nzFor="id-api-url">Url</nz-form-label><nz-form-control [nzSpan]="21"><input nz-input id="id-api-url" name="id-api-url" [(ngModel)]="_dataSelected.upstream_url"></nz-form-control></nz-form-item ></form>
</nz-modal>

Angular 入门教程系列：36：Restful的增删改查相关推荐

JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查
JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查参考文章: (1)JS组件系列--BootstrapTable+Kno ...
JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）
JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案(一) 参考文章: (1)JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案( ...
Angular 入门教程系列：39：使用ng-alain进行开发
在前面的文章中介绍过ng-alain,当时在使用的时候还显得不是很方便,最简单的一个demo运行的都不是非常流畅.而目前的版本已经做有较大的改进,再这个基础上进行二次开发,尤其是一些后端的平台或者监控 ...
mysql数据库入门教程(6)：数据的增删改
前面两篇博文介绍了数据库的查询 mysql数据库入门教程(4):查询讲解大全 mysql数据库入门教程(5):多表操作(连接查询,子查询,分页查询,联合查询) 今天介绍下数据库的增删改. 数据库基本操 ...
Mybatis入门：2(xml形式的增删改查)
xml形式的增删改查这里感觉没啥好讲的,照着代码自己敲一遍.认真再看看应该都懂的. Maven工程坐标 <?xml version="1.0" encoding=" ...
Oracle系列三：Oracle 增删改查
步入正题,大数据项目筹备阶段,我感觉我成数据管理员了, 天天就是各种导数据, 天天写SQL,所以就想多了解一下更深入的知识点.比如:各种优化, 存储过程,触发器,索引等方面的知识我们循序渐进, 这里 ...
SQLAlchemy教程（二）基本增删改查
增删改查增: from sqlalchemy.orm import sessionmaker from sqlalchemy import create_enginefrom s1 import m ...
Angular 入门教程系列：37：使用ng-alain快速开发
ng-alain在ng-zorro-antd上再封一程,可以更快加速开发速度,目前在github上已经超过1800个star.这篇文章来简单看一下如何使用. 创建应用框架因为alain缺省使用使用l ...
Angular 入门教程系列：24：Angular 6 + NG-Zorro
NG-Zorro发行到1.0版本后,理论上说兼容性考虑地会好一些,可以考虑引入了.因为其需要Angular 6的版本,而Angular 6在本年度5月份左右刚刚发布,而且考虑到rxjs等相关的变化,低 ...

Angular 入门教程系列：36：Restful的增删改查

删除