开发手册 欢迎您!
软件开发者资料库

Angular 6 - Http Client

Angular 6 Http Client - 从简单和简单的步骤开始学习Angular 6,从基本到高级概念,包括概述,环境设置,项目设置,组件,模块,数据绑定,事件绑定,模板,指令,管道,路由,服务, Http服务,表单,动画,材料,CLI,示例。

HttpClient是在Angular 6中引入的,它将帮助我们获取外部数据,发布到它等.我们需要导入http模块以使用http服务.让我们考虑一个示例来了解如何使用http服务.

要开始使用http服务,我们需要在 app.module.ts中导入模块如下所示 :

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { HttpClientModule } from '@angular/common/http';import { AppComponent } from './app.component';@NgModule({   declarations: [      AppComponent   ],   imports: [      BrowserModule,      BrowserAnimationsModule,      HttpClientModule   ],   providers: [],   bootstrap: [AppComponent]})export class AppModule { }

如果你看到突出显示的代码,我们从@ angular/common/http导入了HttpClientModule,并且导入数组中也添加了相同的内容.

让我们现在使用 app.component.ts 中的http客户端.

import { Component } from '@angular/core';import { HttpClient } from '@angular/common/http';@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})export class AppComponent {   constructor(private http: HttpClient) { }   ngOnInit() {      this.http.get("http://jsonplaceholder.typicode.com/users").      subscribe((data) ⇒ console.log(data))   }}

让我们了解上面突出显示的代我们需要导入http以使用该服务,该服务如下所示:

import { HttpClient } from '@angular/common/http';

在类 AppComponent 中,创建了一个构造函数,并且私有变量http为Http类型.要获取数据,我们需要使用http提供的 get API ,如下所示

this.http.get ();

它将获取url作为参数,如代码所示.

我们将使用测试url :   https://jsonplaceholder.typicode.com/users 获取json数据.订阅将在控制台中记录输出,如浏览器中所示 :

控制台输出地图

如果看到,json对象将显示在控制台中.对象也可以在浏览器中显示.

对于要在浏览器中显示的对象,更新 app.component.html

import { Component } from '@angular/core';import { HttpClient } from '@angular/common/http';@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})export class AppComponent {   constructor(private http: HttpClient) { }   httpdata;   ngOnInit() {      this.http.get("http://jsonplaceholder.typicode.com/users")      .subscribe((data) => this.displaydata(data));        }   displaydata(data) {this.httpdata = data;}}

app中. component.ts ,使用subscribe方法,我们将调用display data方法并将获取的数据作为参数传递给它.

在显示数据方法中,我们将存储变量httpdata中的数据.使用 for 通过此httpdata变量在浏览器中显示数据,该变量在 app.component.html 文件中完成.

   
  • Name : {{data.name}} Address: {{data.address.city}}
  • json对象如下 :

    {   "id": 1,   "name": "Leanne Graham",   "username": "Bret",   "email": "Sincere@april.biz",      "address": {      "street": "Kulas Light",      "suite": "Apt. 556",      "city": "Gwenborough",      "zipcode": "92998-3874",      "geo": {         "lat": "-37.3159",         "lng": "81.1496"      }   },      "phone": "1-770-736-8031 x56442",   "website": "hildegard.org",   "company": {      "name": "Romaguera-Crona",      "catchPhrase": "Multi-layered client-server neural-net",      "bs": "harness real-time e-markets"   }}

    该对象具有id,name,username,email和address等属性内部有街道,城市等,以及与电话,网站和公司相关的其他详细信息.使用 for 循环,我们将在浏览器中显示名称和城市详细信息,如 app.component.html 文件中所示.

    这是显示器在浏览器中显示的方式 :

    使用For-Loop名称城市详细信息

    现在让我们添加搜索参数,该参数将根据特定数据进行过滤.我们需要根据传递的搜索参数获取数据.

    以下是 app.component.html app.component中所做的更改. ts 文件 :

    app.component.ts

    import { Component } from '@angular/core';import { HttpClient } from '@angular/common/http';@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})export class AppComponent {   constructor(private http: HttpClient) { }   httpdata;   name;   searchparam = 2;   ngOnInit() {      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)      .subscribe((data) => this.displaydata(data));        }   displaydata(data) {this.httpdata = data;}}

    获取api ,我们将添加搜索参数id = this.searchparam. searchparam等于2.我们需要json文件中 id = 2 的详细信息.

    这是浏览器显示和减去的方式;

    Ervin Howell

    我们已经安装了浏览器中的数据,这是从http接收的.浏览器控制台中显示相同的内容. json中带有 id = 2 的名称将显示在浏览器中.