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接收的。浏览器控制台中也会显示相同的内容。