欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 10:40:00
一 准备工作 首先,ionic3+angular4的开发环境你得有,这里就不赘述。环境准备好,创建一个空白项目,模板自选。 二 实现过程 1 新建json文件和ser...

一 准备工作

首先,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中引用;

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