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接收的，同時控制臺中也會顯示相同內容。

總結

以上是生活随笔為你收集整理的angular4创建html,Angular 4 Http服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。