离子3安古拉四实现接口请求及本地json文件读取示例

一准备工作

首先，ionic3 Angular4的开发环境你得有，这里就不赘述。环境准备好，创建一个空白项目，模板自选。

二实现过程

一新建json文件和服务

服务记得在app.module.ts中引用

json和服务

2 json文件格式

格式类似这样，根据实际需求决定。

[ { 'id':'1 '，' name': '谢晗，'年龄' :'24 '，'留言' : '测试json文件读取}，{“id”:“2”，“name”:谢晗，'年龄' :'24 '，'留言' : '测试json文件读取}，{“id”:“3”，“name”:谢晗，'年龄' :'24 '，'留言' : '测试json文件读取}，{“id”:“4”，“name”:谢晗，'年龄' :'24 '，'留言' : '测试json文件读取}]3服务

从“@棱角分明/核心”导入{内射}；从“rxjs/天文台”导入{天文台}；从" @angular/http "导入{Http，Response }；导入”rxjs/add/operator/map”；@可注射()导出类DemoService {构造函数（私有HttpServiCe :(Http){ }//网络接口请求getHomeInfo(): ObservableResponse {返回此。httpservice。请求(' http://jsonplaceholder。打字码。com/users') } //本地json文件请求getrequest contact(){返回此。httpservice。get(' assets/JSON/message。JSON ')} } 4数据显示

一网络接口请求

//家。t从“@棱角分明/核心”导入{变更检测器，组件}；从“离子角”导入{导航控制器}；从""导入{DemoService}././服务/演示。“服务”；@ Component({选择器： ' page-home '，模板Url: 'home.html'})导出类主页{ //接收数据用列表数据：对象；//依赖注入构造函数（公共导航控制器，私有ref: ChangeDetectorRef，私有demoService: DemoService)、{ } ionViewDidLoad() { //网络请求这个。GetHomeInfo()；} GetHomeInfo(){ this。DemoServiCe。GetHomeInfo().订阅(RES={ this。list data=RES . JSON()；//数据格式请看log console.log('listData -'，这。listData)；这个。参考文献detectchanges()；},错误={ console.log(错误);});} }//home。html离子-标题离子-导航条离子-标题首页/ion-title/ion-nav bar/ion-header ion-content padding ion-list * ngFOr='让列表数据项' ion-item！- ?是有角的特定语法，相当于判断数据是否存在，有则显示无则不显示- {{item？名称} }/离子-项目/离子-列表/离子-内容效果图

2本地json文件请求

服务中已经写了getRequestContact()方法对本地json文件读取。

//联系人。t从“@棱角分明/核心”导入{变更检测器，组件}；从“离子角”导入{导航控制器}；从""导入{DemoService}././服务/演示。“服务”；@ Component({选择器： '页面-联系人'，模板URL : '联系人。html ' })导出类联系人页面{联系人信息=[]；构造函数（公共导航控制器，私有demoService: DemoService，私有ref: ChangeDetectorRef)、{ } ionViewDidLoad() { //网络请求这个。getrequest contact()；} getrequest contact(){ this。demoservice。getrequest contact().订阅(RES={ this。contact info=RES . JSON()；console.log('contactInfo -'，这。contact info)；这个。参考文献detectchanges()；},错误={ console.log(错误);});} }//联系人。html离子-标题离子-导航条离子-标题联系人/ion-title/ion-nav bar/ion-header ion-content ion-list ion-item * ngFOr='让项目的联系信息' div style=' display : flex弯曲方向：列；'跨度姓名：{{item？名称}}/span span年龄：{{item？年龄} }/跨度信息：{{item？消息} }/span/div/ion-item/ion-list/ion-content效果图

三总结

1.所有创建的页，面，张，版要在app.module.ts中引用；2 .服务要在app.module.ts中引用；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。