直接上代码吧，之前的配置直接查看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.....
转自：http://www.cnblogs.com/cxd1008/p/7717037.html