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之水平横向滚动歌词同步的应用
May 07 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 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自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
Python命名空间详解
2014/08/18 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
详解Python中where()函数的用法
2018/03/27 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
对Python信号处理模块signal详解
2019/01/09 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
前台接待员岗位职责
2014/01/02 职场文书
代理班主任的自我评价
2014/02/04 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
环境建设实施方案
2014/03/14 职场文书
职称评定自我鉴定
2014/03/18 职场文书
银行委托书范本
2014/04/04 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python