angular HttpClient get 方法获取数据

请先查看上一篇文章HttpClient配置，之后在进行。

使用

this.myhttp.get('http://192.168.2.139:9002/api/patients')方法，读取webapi。因为get方法是通过AJAX方法读取数据的，所以服务器要可以跨域访问，具体方法查询webapi文章

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Patient } from './app.patient.server';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'angular4.3';
  results: string[];
  myPatientList: Patient[] = [];

16   constructor(
    private myhttp: HttpClient
  ) { }

  ngOnInit(): void {
    this.myhttp.get('http://192.168.2.139:9002/api/patients')
      .subscribe(data => {
        this.myPatientList = (<any>data).map(u => new Patient({
          id: u.PatientId,
          FirstName: u.Details.FirstName,
          LastName: u.Details.LastName,
          MiddleName: u.Details.MiddleName,
          BirthDate: u.Details.BirthDate,
          Gender: u.Details.Gender,
          PhoneNumber: u.PersonalInfo.PhoneNumberPrimary,
          ZIPCODE: u.PersonalInfo.ZIPCODE,
          City: u.PersonalInfo.City,
          Street: u.PersonalInfo.Street,
          EmailAddress: u.PersonalInfo.EmailAddressPrimary,
          CitizenServiceNumber: u.PersonalInfo.ServiceNumber
        }));
        38       });
  }
}

(<any>data).map()方法直接把读取data数据转换成实体类。
【注：需要查看自己的json文件，对应好结构】 网上很多json都是以results[]开头。以所用(<any>data).results.map() 这个问题真的卡了我很久，在同事长庆的帮助下才得以解决。

实体类代码，如下：

export class Patient {
    id: string;
    FirstName: string;
    LastName: string;
    MiddleName: string;
    BirthDate: string;
    Gender: string;
    PhoneNumber: string;
    ZIPCODE: string;
    City: string;
    Street: string;
    EmailAddress: string;
    CitizenServiceNumber: string;

    public constructor(
      fields?: {
        id: string,
        FirstName: string,
        LastName: string,
        MiddleName: string,
        BirthDate: string,
        Gender: string,
        PhoneNumber: string,
        ZIPCODE: string,
        City: string,
        Street: string,
        EmailAddress: string,
        CitizenServiceNumber: string
      }) {
      // tslint:disable-next-line:curly
      if (fields) Object.assign(this, fields);
    }

    getFullName(): string {
      return this.FirstName + ' ' + this.LastName;
    }
  }

前台调用很简单，直接读取实体类就可以了

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  {{results}}
  <h2>ngfor</h2>
  <ul>
      <li *ngFor="let myPatient of myPatientList" >
          id:{{myPatient.id}} FirstName :{{myPatient.FirstName}}
      </li>
</ul>
</div>

显示如下图：

注：这个用法写的还很简单，还需要传参数，加头文件之类的方法，不过已经可以基本的读取数据了。