Angular 6 Http Client
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,同样也添加到了imports数组中。
现在让我们在app.component.ts中使用http client。
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类中,创建了一个构造函数和HttpClient类型的私有变量http。为了获取数据,我们需要使用http提供的get方法,如下所示:
this.http.get();
它将获取的url作为参数,如代码所示。
我们将使用https://jsonplaceholder.typicode.com/users获取json数据,subscribe将在控制台中记录输出,如浏览器所示:
如果您看到,json对象会显示在控制台中。这些对象也可以在浏览器中显示。
app.component.html和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; ngOnInit() { this.http.get("http://jsonplaceholder.typicode.com/users") .subscribe((data) => this.displaydata(data)); } displaydata(data) {this.httpdata = data;} }
在app.component.ts中,使用subscribe方法,我们将调用displaydata方法,并将获取的数据作为参数传递给它。.
在displaydata方法中,我们将数据存储在变量httpdata中。数据显示在浏览器中,使用*ngFor遍历这个httpdata变量。
<ul *ngFor = "let data of httpdata"> <li>Name : {{data.name}} Address: {{data.address.city}}</li> </ul>
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等属性。以及与phone, website, company等其他信息。使用for循环,我们将在浏览器中显示name和city,如文件所示。
下面是代码执行后在浏览器中的显示内容:
现在让我们添加搜索参数,它将根据特定数据进行过滤。我们需要根据传递的搜索参数获取数据。
以下是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;} }
对于get api,我们将添加搜索参数id = this.searchparam。searchparam=2,服务器将json数据中id=2的细节。
浏览器的显示如下:
我们已经在浏览器中整合了数据,这些数据是从http接收的。浏览器控制台中也会显示相同的内容。