angular HttpClient post put del 方法

 ?1 import { Component, OnInit } from ‘@angular/core‘; ?2 import { Patient } from ‘./patients.service‘; ?3 import { HttpClient, HttpParams, HttpHeaders } from ‘@angular/common/http‘; ?4 ??5 @Component({ ?6 ????selector: ‘patient-component‘, ?7 ????templateUrl: ‘app/app-patient/patient.component.html‘, ?8 ????//providers: [PatientsService] ?9 }) 10 export class PatientComponent implements OnInit { 11 ?12 ????results: string[]; 13 ????myPatientList: Patient[] = []; 14 ????myPatient: Patient; 15 ????myWebapiURL = ‘http://localhost:52513/api/patients/‘; 16 ????myHttpHead = { headers: new HttpHeaders({ ‘Content-Type‘: ‘application/json‘ }) }; 17 ????private myHttpParams = new HttpParams().set(‘username‘, ‘dih‘).set(‘password‘, ‘dih‘); 18 ????constructor 19 ????????( 20 ????????private myhttp: HttpClient 21 ????????//private myPatientsService: PatientsService 22 ????????) 23 ????{ } 24 ????ngOnInit(): void { 25 ????????this.results = ["ngOnInit()方法"]; 26 ????????this.getall(); 27 ????} 28 ????getall() { 29 ????????//console.log("getall"); 30 ????????this.myPatientList = []; 31 ????????this.myhttp.get(this.myWebapiURL) 32 ????????????.subscribe(data => { 33 ????????????????let count = (<Array<string>>data).length; 34 ????????????????for (var i = 0; i < count; i++) { 35 ?36 ????????????????????this.myPatientList.push(new Patient({ 37 ????????????????????????id: data[i].PatientId, 38 ????????????????????????FirstName: data[i].Details.FirstName, 39 ????????????????????????LastName: data[i].Details.LastName, 40 ????????????????????????MiddleName: data[i].Details.MiddleName, 41 ????????????????????????BirthDate: data[i].Details.BirthDate, 42 ????????????????????????Gender: data[i].Details.Gender, 43 ????????????????????????PhoneNumber: data[i].PersonalInfo.PhoneNumberPrimary, 44 ????????????????????????ZIPCODE: data[i].PersonalInfo.ZIPCODE, 45 ????????????????????????City: data[i].PersonalInfo.City, 46 ????????????????????????Street: data[i].PersonalInfo.Street, 47 ????????????????????????EmailAddress: data[i].PersonalInfo.EmailAddressPrimary, 48 ????????????????????????CitizenServiceNumber: data[i].PersonalInfo.ServiceNumber 49 ????????????????????})); 50 ????????????????} 51 ????????????} 52 ????????????); 53 ????} 54 ?55 ?56 ????getbyId(id: string) { 57 ????????this.myhttp.get(this.myWebapiURL + id) 58 ????????????.subscribe(data => { 59 ????????????????this.myPatient = new Patient({ 60 ????????????????????id: data[‘PatientId‘], 61 ????????????????????FirstName: data[‘Details‘].FirstName, 62 ????????????????????LastName: data[‘Details‘].LastName, 63 ????????????????????MiddleName: data[‘Details‘].MiddleName, 64 ????????????????????BirthDate: data[‘Details‘].BirthDate, 65 ????????????????????Gender: data[‘Details‘].Gender, 66 ????????????????????PhoneNumber: data[‘PersonalInfo‘].PhoneNumberPrimary, 67 ????????????????????ZIPCODE: data[‘PersonalInfo‘].ZIPCODE, 68 ????????????????????City: data[‘PersonalInfo‘].City, 69 ????????????????????Street: data[‘PersonalInfo‘].Street, 70 ????????????????????EmailAddress: data[‘PersonalInfo‘].EmailAddressPrimary, 71 ????????????????????CitizenServiceNumber: data[‘PersonalInfo‘].ServiceNumber 72 ????????????????}); 73 ????????????}); 74 ????} 75 ?76 ?77 ?78 ????httpPostExample(FirstName: string, LastName: string) { 79 ????????const body = { 80 ????????????"Details": { 81 ????????????????"FirstName": FirstName, 82 ????????????????"LastName": LastName, 83 ????????????????"MaidenName": ‘‘, 84 ????????????????"MiddleName": ‘‘, 85 ????????????????"CustomId": ‘‘, 86 ????????????????"BirthDate": "2017-10-18T11:05:51.017", 87 ????????????????"Gender": 1 88 ????????????}, 89 ????????????"Anatomy": { 90 ????????????????"BodyWeight": 75, 91 ????????????????"BodyHeight": 175, 92 ????????????????"LeftFootLength": 0, 93 ????????????????"RightFootLength": 0, 94 ????????????????"StrideLengthWalking": 0, 95 ????????????????"StrideLengthRunning": 0, 96 ????????????????"PelvisWidth": 0, 97 ????????????????"LeftUpperLegLength": 0, 98 ????????????????"RightUpperLegLength": 0, 99 ????????????????"LeftLowerLegLength": 0,100 ????????????????"RightLowerLegLength": 0101 ????????????},102 ????????????"PersonalInfo": {103 ????????????????"ServiceNumber": ‘‘,104 ????????????????"EmailAddressPrimary": "chenxiaodan@dihmed.com",105 ????????????????"EmailAddressSecondary": ‘‘,106 ????????????????"PhoneNumberPrimary": ‘‘,107 ????????????????"PhoneNumberSecondary": ‘‘,108 ????????????????"StreetAddress": ‘‘,109 ????????????????"ZIPCode": ‘‘,110 ????????????????"City": ‘‘,111 ????????????????"Street": ‘‘,112 ????????????????"Country": ‘‘,113 ????????????????"EmergencyContactDetails": ‘‘114 ????????????},115 ????????????"AdditionalProperties": ‘‘116 ????????};117 ????????this.myhttp.post(this.myWebapiURL, body, this.myHttpHead)118 ????????????.subscribe(119 ????????????(val) => {120 ????????????????console.log(‘POST call successful value returned in body‘, val);121 ????????????????this.getall();122 ????????????},123 ????????????response => {124 ????????????????console.log(‘POST call in error‘, response);125 ????????????},126 ????????????() => {127 ????????????????console.log(‘The POST observable is now completed.‘);128 ????????????});129 ????????130 ????}131 132 ????httpPutExample(id: string, FirstName: string, LastName: string) {133 ????????const body = {134 ????????????"PatientId": id,135 ????????????"Details": {136 ????????????????"FirstName": FirstName,137 ????????????????"LastName": LastName,138 ????????????????"MaidenName": ‘‘,139 ????????????????"MiddleName": ‘‘,140 ????????????????"CustomId": ‘‘,141 ????????????????"BirthDate": "2017-10-18T11:05:51.017",142 ????????????????"Gender": 1143 ????????????},144 ????????????"Anatomy": {145 ????????????????"BodyWeight": 75,146 ????????????????"BodyHeight": 175,147 ????????????????"LeftFootLength": 0,148 ????????????????"RightFootLength": 0,149 ????????????????"StrideLengthWalking": 0,150 ????????????????"StrideLengthRunning": 0,151 ????????????????"PelvisWidth": 0,152 ????????????????"LeftUpperLegLength": 0,153 ????????????????"RightUpperLegLength": 0,154 ????????????????"LeftLowerLegLength": 0,155 ????????????????"RightLowerLegLength": 0156 ????????????},157 ????????????"PersonalInfo": {158 ????????????????"ServiceNumber": ‘‘,159 ????????????????"EmailAddressPrimary": "chenxiaodan@dihmed.com",160 ????????????????"EmailAddressSecondary": ‘‘,161 ????????????????"PhoneNumberPrimary": ‘‘,162 ????????????????"PhoneNumberSecondary": ‘‘,163 ????????????????"StreetAddress": ‘‘,164 ????????????????"ZIPCode": ‘‘,165 ????????????????"City": ‘‘,166 ????????????????"Street": ‘‘,167 ????????????????"Country": ‘‘,168 ????????????????"EmergencyContactDetails": ‘‘169 ????????????},170 ????????????"AdditionalProperties": ‘‘171 ????????};172 ????????this.myhttp.put(this.myWebapiURL + id, body, this.myHttpHead)173 ????????????.subscribe(174 ????????????(val) => {175 ????????????????console.log(‘put call successful‘, val);176 ????????????????this.getall();177 ????????????},178 ????????????response => {179 ????????????????console.log(‘put call in error‘, response);180 ????????????},181 ????????????() => {182 ????????????????console.log(‘put is now completed.‘);183 ????????????});184 185 ????}186 187 188 ????delbyId(id: string) {189 ????????this.myhttp.delete(this.myWebapiURL + id).subscribe((res) => {190 ????????????console.log("del ok", res);191 ????????????this.getall();192 ????????}, (err) => {193 ????????????console.log("del err", err);194 ????????});195 ???????196 ????}197 }

 1 <div>patient-component.html</div> 2 ?3 ?4 {{results}} 5 ?6 <h2>ngfor</h2> 7 <div *ngIf=myPatientList> 8 ????<ul> 9 ????????<li *ngFor="let myPatient of myPatientList">10 ????????????id:<span style="font-weight:700"> {{myPatient.id}} </span> FirstName :{{myPatient.FirstName}}11 ????????</li>12 ????</ul>13 14 </div>15 <div>16 ????<input type="text" #txt1 placeholder="请输入要查询的GUID">17 ????<button (click)="getbyId(txt1.value)"> 查询</button>18 ????<button (click)="delbyId(txt1.value)"> 删除</button>19 20 21 ????<div *ngIf=myPatient>22 ????????<ul>23 ????????????<li>id:{{myPatient.id}}</li>24 ????????????<li>FirstName :{{myPatient.FirstName}} </li>25 ????????????<li>email:{{myPatient.EmailAddress}}</li>26 ????????</ul>27 ????</div>28 </div>29 <div>30 ????FirstName :<input type="text" #txtFirstName placeholder="请输入FirstName">31 ????LastName :<input type="text" #txtLastName placeholder="请输入LastName">32 ????<button (click)="httpPostExample(txtFirstName.value,txtLastName.value)"> httpPostExample【新增】</button>33 ????<button (click)="httpPutExample(txt1.value,txtFirstName.value,txtLastName.value)"> httpPutExample【修改】</button>34 ????35 </div>