一 準(zhǔn)備工作
專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)天壇街道免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
首先，ionic3+Angular4的開發(fā)環(huán)境你得有，這里就不贅述。環(huán)境準(zhǔn)備好，創(chuàng)建一個空白項目，模板自選。
二 實現(xiàn)過程
1 新建json文件和service
service記得在app.module.ts中引用
json和service
2 json文件格式
格式類似這樣，根據(jù)實際需求決定。
重慶分公司
重慶分公司
[
{
"id":"1",
"name":"xiehan",
"age":"24",
"message":"測試json文件讀取"
},
{
"id":"2",
"name":"xiehan",
"age":"24",
"message":"測試json文件讀取"
},
{
"id":"3",
"name":"xiehan",
"age":"24",
"message":"測試json文件讀取"
},
{
"id":"4",
"name":"xiehan",
"age":"24",
"message":"測試json文件讀取"
}
]
3 service
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){
}
// 網(wǎng)絡(luò)接口請求
getHomeInfo(): Observable {
return this.httpService.request('http://jsonplaceholder.typicode.com/users')
}
// 本地json文件請求
getRequestContact(){
return this.httpService.get("assets/json/message.json")
}
}
4 數(shù)據(jù)顯示
1 網(wǎng)絡(luò)接口請求
//home.ts
import {ChangeDetectorRef, Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import {DemoService} from "../../services/demo.service";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// 接收數(shù)據(jù)用
listData: Object;
// 依賴注入
constructor(public navCtrl: NavController,
private ref: ChangeDetectorRef,
private demoService: DemoService,) {
}
ionViewDidLoad() {
// 網(wǎng)絡(luò)請求
this.getHomeInfo();
}
getHomeInfo(){
this.demoService.getHomeInfo()
.subscribe(res => {
this.listData = res.json();
// 數(shù)據(jù)格式請看log
console.log("listData------->",this.listData);
this.ref.detectChanges();
}, error => {
console.log(error);
});
}
}
//home.html
首頁
{{item?.name}}
效果圖
2 本地json文件請求
service中已經(jīng)寫了getRequestContact()方法對本地json文件讀取。
//contact.ts
import {ChangeDetectorRef, Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import {DemoService} from "../../services/demo.service";
@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
contactInfo=[];
constructor(public navCtrl: NavController,
private demoService: DemoService,
private ref: ChangeDetectorRef,) {
}
ionViewDidLoad() {
// 網(wǎng)絡(luò)請求
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
聯(lián)系人
姓名:{{item?.name}}
年齡:{{item?.age}}
信息:{{item?.message}}
效果圖
三 總結(jié)
1.所有創(chuàng)建的page要在app.module.ts中引用；
2.service要在app.module.ts中引用；
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
