热门标签 | 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>

显示如下图:

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


推荐阅读
  • Iwishtousestreamsasrecommendedbythejson.netperformancetipsdocumentation,howeverImuna ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • 一、Jsoup介绍Jsoup是一款Java的HTML解析器,可直接解析某个URL、HTML文本内容。他提供了一套非常具有效率的API,可通过DOM,CSS以及类似于Jquer ... [详细]
  • 参考资料:http:www.systinet.comdocwasp_uddiuddiigpreliminary.html教程中的一个例程,可以下载。来源:竹笋炒肉虽然用telnet这样的程 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文详细介绍如何使用Samba软件配置CIFS文件共享服务,涵盖安装、配置、权限管理及多用户挂载等关键步骤。通过具体示例和命令行操作,帮助读者快速搭建并优化Samba服务器。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 通过Web界面管理Linux日志的解决方案
    本指南介绍了一种利用rsyslog、MariaDB和LogAnalyzer搭建集中式日志管理平台的方法,使用户可以通过Web界面查看和分析Linux系统的日志记录。此方案不仅适用于服务器环境,还提供了详细的步骤来确保系统的稳定性和安全性。 ... [详细]
  • 超文本传输协议HTTP也许是当今互联网上使用的最重要的协议了。尽管java.net包提供了基本通过HTTP访问资源的功能,但它没有提供全面的灵活性和其它很多应用程序需要的功能。HttpClient就 ... [详细]
  • HttpClient作为官方推荐的http客户端,相比之前的WebClient和WebRequest好用了很多,但默认无法为每个请求单独设置超时,只能给HttpClient设置默认 ... [详细]
  • 如何使用.NET CORE HttpClient
    小编这次要给大家分享的是如何使用.NETCOREHttpClient,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。前 ... [详细]
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社区 版权所有