angular4创建html,Angular 4 Http服务

Angular 4  Http服务

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 { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

BrowserAnimationsModule,

HttpModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

上面的代码中，我们从@angular/http导入了HttpModule，同样的代码也添加到了导入数组中。

现在让我们用在app.component.ts中使用http服务import { Component } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor(private http: Http) { }

ngOnInit() {

this.http.get("http://jsonplaceholder.typicode.com/users").

map((response) ⇒ response.json()).

subscribe((data) ⇒ console.log(data))

}

}

让我们理解上面的代码，我们需要导入http来利用该服务，具体操作如下。import { Http } from '@angular/http';

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

它将获取的URL作为参数，如代码所示。

我们使用测试url： https://jsonplaceholder.typicode.com/users来获取json数据.对提取的URL数据映射和订阅执行两个操作。Map方法有助于将数据转换为JSON格式，要使用Map，我们需要先导入，如下：import 'rxjs/add/operator/map';

map工作完成后，订阅者将在控制台中记录输出，如浏览器所示：

正如您看到，JSON对象会显示在控制台中。这些对象也可以在浏览器中显示。

对于要在浏览器中显示的对象，请按如下方式更新app.component.html和app.component.ts的代码import { Component } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor(private http: Http) { }

httpdata;

ngOnInit() {

this.http.get("http://jsonplaceholder.typicode.com/users").

map(

(response) ⇒ response.json()

).

subscribe(

(data) ⇒ {this.displaydata(data);}

)

}

displaydata(data) {this.httpdata = data;}

}

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

在显示数据方法中，我们将数据存储在变量httpdata中。在浏览器中使用httpdata变量显示数据，这是在app.component.html文件中完成的。

• Name : {{data.name}} Address: {{data.address.city}}

The json object is as follows −

{

"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循环，我们将在浏览器中显示名称和城市详细信息，如app.component.html文件所示。

这就是浏览器中显示的方式：

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

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

app.component.tsimport { Component } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app';

searchparam = 2;

jsondata;

name;

constructor(private http: Http) { }

ngOnInit() {

this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).

map(

(response) ⇒ response.json()

).

subscribe((data) ⇒ this.converttoarray(data))

}

converttoarray(data) {

console.log(data);

this.name = data[0].name;

}

}

对于get API，我们将添加搜索参数id = this . searcheparam。searcheparam等于2。我们需要JSON数据中id = 2的详细信息。

app.component.html{{name}}

以下是浏览器的显示：

我们已经在浏览器中显示了id=2的数据，这些数据是从http接收的，同时控制台中也会显示相同内容。