ionic3+Angular4实现接口请求及本地json文件读取示例

一 准备工作

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

二 实现过程

1 新建json文件和service

service记得在app.module.ts中引用

2 json文件格式

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

rush:js;"> [ { "id":"1","name":"xiehan","age":"24","message":"测试json文件读取" },{ "id":"2",{ "id":"3",{ "id":"4","message":"测试json文件读取" } ]

3 service

rush:js;"> import {Injectable} from '@angular/core'; import {Observable} from 'rxjs/Observable'; import {Http,Response} from '@angular/http'; import "rxjs/add/operator/map";

@Injectable()
export class DemoService {

constructor(private httpService: Http){
}
// 网络接口请求
getHomeInfo(): Observable {
return this.httpService.request('http://jsonplaceholder.typicode.com/users')
}

// 本地json文件请求
getRequestContact(){
return this.httpService.get("assets/json/message.json")
}
}

4 数据显示

1 网络接口请求

@Component({
selector: 'page-home',templateUrl: 'home.html'
})
export class HomePage {
// 接收数据用
listData: Object;
// 依赖注入
constructor(public navCtrl: NavController,private ref: ChangeDetectorRef,private demoService: DemoService,) {
}

ionViewDidLoad() {
// 网络请求
this.getHomeInfo();
}

getHomeInfo(){
this.demoService.getHomeInfo()
.subscribe(res => {
this.listData = res.json();
// 数据格式请看log
console.log("listData------->",this.listData);
this.ref.detectChanges();
},error => {
console.log(error);
});
}
}

//home.html

首页 {{item?.name}}

效果图

2 本地json文件请求

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

@Component({
selector: 'page-contact',templateUrl: 'contact.html'
})
export class ContactPage {

contactInfo=[];

constructor(public navCtrl: NavController,) {

}

ionViewDidLoad() {
// 网络请求
this.getRequestContact();
}

getRequestContact(){
this.demoService.getRequestContact()
.subscribe(res => {
this.contactInfo = res.json();
console.log("contactInfo------->",this.contactInfo);
this.ref.detectChanges();
},error => {
console.log(error);
});
}
}

// contact.html

联系人 <ion-item *ngFor="let item of contactInfo">

display: flex;flex-direction: column;"> 姓名:{{item?.name}} 年龄:{{item?.age}} 信息:{{item?.message}}

效果图

三 总结

1.所有创建的page要在app.module.ts中引用； 2.service要在app.module.ts中引用；

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