热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

angularHttpClientget方法获取数据

请先查看上一篇文章HttpClient配置,之后在进行。使用this.myhttp.get(http:192.168.2.139:9002apipatients)方法,读取webapi。因

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

使用

this.myhttp.get('http://192.168.2.139:9002/api/patients')方法,读取webapi。因为get方法是通过AJAX方法读取数据的,所以服务器要可以跨域访问,具体方法查询webapi文章
 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 = (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 }
(data).map()方法直接把读取data数据转换成实体类。
【注:需要查看自己的json文件,对应好结构】 网上很多json都是以results[]开头。以所用(data).results.map() 这个问题真的卡了我很久,在同事长庆的帮助下才得以解决。

实体类代码,如下:
 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>ngforh2>
7 <ul>
8 <li *ngFor="let myPatient of myPatientList" >
9 id:{{myPatient.id}} FirstName :{{myPatient.FirstName}}
10 li>
11 ul>
12 div>

显示如下图:

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


推荐阅读
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文介绍如何使用JPA Criteria API创建带有多个可选参数的动态查询方法。当某些参数为空时,这些参数不会影响最终查询结果。 ... [详细]
  • Kubernetes 持久化存储与数据卷详解
    本文深入探讨 Kubernetes 中持久化存储的使用场景、PV/PVC/StorageClass 的基本操作及其实现原理,旨在帮助读者理解如何高效管理容器化应用的数据持久化需求。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 本文详细解析了Python中的os和sys模块,介绍了它们的功能、常用方法及其在实际编程中的应用。 ... [详细]
  • 本文详细介绍了Java中的访问器(getter)和修改器(setter),探讨了它们在保护数据完整性、增强代码可维护性方面的重要作用。通过具体示例,展示了如何正确使用这些方法来控制类属性的访问和更新。 ... [详细]
  • 本文详细探讨了VxWorks操作系统中双向链表和环形缓冲区的实现原理及使用方法,通过具体示例代码加深理解。 ... [详细]
  • Linux设备驱动程序:异步时间操作与调度机制
    本文介绍了Linux内核中的几种异步延迟操作方法,包括内核定时器、tasklet机制和工作队列。这些机制允许在未来的某个时间点执行任务,而无需阻塞当前线程,从而提高系统的响应性和效率。 ... [详细]
  • 本文详细介绍了如何通过RPM包在Linux系统(如CentOS)上安装MySQL 5.6。涵盖了检查现有安装、下载和安装RPM包、配置MySQL以及设置远程访问和开机自启动等步骤。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
author-avatar
醒九九爷
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有