经过一周的奋战，终于完成了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.....
查看更多关于angular HttpClient post put del 方法的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did222664