angular HttpClient post put del 方法

经过一周的奋战，终于完成了angular httpclinent的所有方法，实现如下图：

 

直接上代码吧，之前的配置直接查看angular的前几篇文章。

后台TS代码：

  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": 0
101             },
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": 1
143             },
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": 0
156             },
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>

。。。。。。。。angular4.3 httpclient end.....

posted on 2017-10-23 15:39  cxd1008  阅读(3293)  评论(1)  编辑  收藏  举报