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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
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生成excel文件的简单方法
2014/02/08 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PDO::_construct讲解
2019/01/27 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
matplotlib绘制动画代码示例
2018/01/02 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
关爱残疾人标语
2014/06/25 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏