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


Posted in Javascript onOctober 11, 2017

一 准备工作

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

二 实现过程

1 新建json文件和service

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

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

json和service

2 json文件格式

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

[
 {
  "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){
 }
 // 网络接口请求
 getHomeInfo(): Observable<Response> {
  return this.httpService.request('http://jsonplaceholder.typicode.com/users')
 }

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

4 数据显示

1 网络接口请求

//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 {
 // 接收数据用
 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
<ion-header>
 <ion-navbar>
  <ion-title>首页</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-list *ngFor="let item of listData">
  <ion-item>
  <!--?是Angular特定语法,相当于判断数据是否存在,有则显示无则不显示-->
   {{item?.name}}
  </ion-item>
 </ion-list>
</ion-content>

效果图

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

2 本地json文件请求

service中已经写了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() {
  // 网络请求
  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-header>
 <ion-navbar>
  <ion-title>
   联系人
  </ion-title>
 </ion-navbar>
</ion-header>

<ion-content>
 <ion-list>
  <ion-item *ngFor="let item of contactInfo">
   <div style="display: flex;flex-direction: column;">
    <span>姓名:{{item?.name}}</span>
    <span>年龄:{{item?.age}}</span>
    <span>信息:{{item?.message}}</span>
   </div>
  </ion-item>
 </ion-list>
</ion-content>

效果图

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

三 总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
js实现单张图片平移切换效果
Oct 11 #Javascript
jQuery自动或手动图片切换效果
Oct 11 #jQuery
简单实现vue验证码60秒倒计时功能
Oct 11 #Javascript
mui框架移动开发初体验详解
Oct 11 #Javascript
Scala解析Json字符串的实例详解
Oct 11 #Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
详解vue mint-ui源码解析之loadmore组件
Oct 11 #Javascript
You might like
php array_walk() 数组函数
2011/07/12 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
用Python逐行分析文件方法
2019/01/28 Python
python3 map函数和filter函数详解
2019/08/26 Python
Python切图九宫格的实现方法
2019/10/10 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
法学个人求职信范文
2014/01/27 职场文书
安全承诺书
2015/01/19 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis