在 Angular6 中使用 HTTP 請求服務端數據的步驟詳解
更新時間：2018年08月06日 08:44:30 作者：_marven
本文分步驟給大家介紹了在 Angular6 中使用 HTTP 請求服務端數據的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
第一步
準備好api接口地址， 例如 https://api.example.com/api/
第二步
在根組件 app.components.ts 中引入 HttpClientModule 模塊。
// app.components.ts
import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模塊
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule //聲明HTTP模塊
],
第三步
在組件中使用HTTP模塊向遠程服務器請求數據
1.引入HTTP模塊
// list.components.ts
import { HttpClient } from "@angular/common/http" //這里是HttpClient
2.在組件的構造函數中實例化 HttpClient
constructor(private http:HttpClient){}
3.創(chuàng)建用來接收數據的變量
public anyList:any
4.通過HTTP的get方法請求數據
ngOnInit() { //這個是初始化
this.http.get("https://api.example.com/api/list")
.subscribe(res=>{ this.anyList = res })
}
// get方法中接收的是一個接口文件的地址，它會接收接口傳遞過來的數據，并默認處理為json數據。
// subscribe方法是對get接收的數據進行處理。參數 res 就是接收過來的數據對象。然后把 res 對象賦值給anyList變量。
5：前臺輸出
// list.component.html
<ul *ngFor="let v of anyList"> 循環(huán)輸出anyList對象數據
<a routerLink="/post/{{v.id}}"> 這里的routerLink是angular的a鏈接形式
<img src="{{v.thumb}}" alt=""> 這里的v.thumb是調用anyList對象的每條數據的thumb縮略圖
<h3>{{v.name}}</h3>
</a>
</ul>
打開前臺頁面，就可以看到輸出的數據信息了。
總結
以上所述是小編給大家介紹的在 Angular6 中使用 HTTP 請求服務端數據的步驟詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家介紹了Angular16如何獲得路由參數的實現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
Angular6實現(xiàn)拖拽功能指令drag實例詳解
這篇文章主要為大家介紹了Angular6實現(xiàn)拖拽功能指令drag實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
本文給大家總結了下在Angularjs的模板、控制器、或者服務中使用Filters的方法，有需要的小伙伴可以參考下2016-03-03
這篇文章主要介紹了Angular1.x復雜指令,結合實例形式分析了指令的使用、模板指令、指令的作用域等概念與具體使用技巧,需要的朋友可以參考下2017-03-03
本文主要介紹AngularJS ng-paste 指令,這里對ng-paste 指令的基礎資料做了整理,并附有代碼示例,有需要的朋友可以參考下2016-08-08
這篇文章主要介紹了AngularJS 單元測試（二）的相關資料,需要的朋友可以參考下2016-09-09
本文主要講解AngularJS ng-repeat 指令,這里對ng-repeat的基礎資料做了整理，并附有示例代碼，有興趣的朋友可以參考下2016-08-08
本文給大家詳細分析了Angular2整合其他插件的方法，有興趣的朋友學習下。2018-01-01
這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)星星等級評分功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Angular中Lazy Loading懶加載陷阱避坑最佳實踐
這篇文章主要為大家介紹了Angular中Lazy Loading懶加載陷阱避坑最佳實踐,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10