angular HttpClient get 方法获取数据

 1 import { Component, OnInit } from ‘@angular/core‘;
 2 import { HttpClient } from ‘@angular/common/http‘;
 3 import { Patient } from ‘./app.patient.server‘;
 4 @Component({
 5   selector: ‘app-root‘,
 6   templateUrl: ‘./app.component.html‘,
 7   styleUrls: [‘./app.component.css‘]
 8 })
 9 
10 export class AppComponent implements OnInit {
11   title = ‘angular4.3‘;
12   results: string[];
13   myPatientList: Patient[] = [];
14 
15 16   constructor(
17     private myhttp: HttpClient
18   ) { }
19 
20   ngOnInit(): void {
21     this.myhttp.get(‘http://192.168.2.139:9002/api/patients‘)
22       .subscribe(data => {
23         this.myPatientList = (<any>data).map(u => new Patient({
24           id: u.PatientId,
25           FirstName: u.Details.FirstName,
26           LastName: u.Details.LastName,
27           MiddleName: u.Details.MiddleName,
28           BirthDate: u.Details.BirthDate,
29           Gender: u.Details.Gender,
30           PhoneNumber: u.PersonalInfo.PhoneNumberPrimary,
31           ZIPCODE: u.PersonalInfo.ZIPCODE,
32           City: u.PersonalInfo.City,
33           Street: u.PersonalInfo.Street,
34           EmailAddress: u.PersonalInfo.EmailAddressPrimary,
35           CitizenServiceNumber: u.PersonalInfo.ServiceNumber
36         }));
37         38       });
39   }
40 }

 1 export class Patient {
 2     id: string;
 3     FirstName: string;
 4     LastName: string;
 5     MiddleName: string;
 6     BirthDate: string;
 7     Gender: string;
 8     PhoneNumber: string;
 9     ZIPCODE: string;
10     City: string;
11     Street: string;
12     EmailAddress: string;
13     CitizenServiceNumber: string;
14 
15     public constructor(
16       fields?: {
17         id: string,
18         FirstName: string,
19         LastName: string,
20         MiddleName: string,
21         BirthDate: string,
22         Gender: string,
23         PhoneNumber: string,
24         ZIPCODE: string,
25         City: string,
26         Street: string,
27         EmailAddress: string,
28         CitizenServiceNumber: string
29       }) {
30       // tslint:disable-next-line:curly
31       if (fields) Object.assign(this, fields);
32     }
33 
34     getFullName(): string {
35       return this.FirstName + ‘ ‘ + this.LastName;
36     }
37   }

 1 <div style="text-align:center">
 2   <h1>
 3     Welcome to {{title}}!
 4   </h1>
 5   {{results}}
 6   <h2>ngfor</h2>
 7   <ul>
 8       <li *ngFor="let myPatient of myPatientList" >
 9           id:{{myPatient.id}} FirstName :{{myPatient.FirstName}}
10       </li>
11 </ul>
12 </div>