当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > ionic3+Angular4实现接口请求及本地json文件读取示例

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

一 准备工作

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

二 实现过程

1 新建json文件和service

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

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>

效果图


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>

效果图


三 总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网