好资源导航 » 文章资讯 » 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

2023-09-09 09:45:06 248

第一步

准备好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(privatehttp:HttpClient){}

3.创建用来接收数据的变量

publicanyList: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

循环输出anyList对象数据
这里的routerLink是angular的a链接形式
这里的v.thumb是调用anyList对象的每条数据的thumb缩略图
{{v.name}}

打开前台页面，就可以看到输出的数据信息了。

总结

以上所述是小编给大家介绍的在Angular6中使用HTTP请求服务端数据的步骤详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

{{v.name}}

热门推荐

随机推荐