ionic3 et Angular4 implémentent des requêtes d'interface et des exemples de lecture de fichiers json locaux

Cet article présente principalement la demande d'interface d'implémentation ionic3+Angular4 et des exemples de lecture de fichiers json locaux. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

1 Préparation

Tout d'abord, vous devez disposer de l'environnement de développement de ionic3+Angular4, que je n'entrerai pas dans les détails ici. Lorsque l'environnement est prêt, créez un projet vierge avec un modèle de votre choix.

Deuxième processus de mise en œuvre

1 Créez un nouveau fichier json et un nouveau service

service n'oubliez pas de citer

json et service

2 format de fichier json

Le format est similaire à celui-ci et est déterminé en fonction des besoins réels.

[
 {
  "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 services

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 affichage des données

1 Demande d'interface réseau

//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>

Rendu

2 JSON local file request

La méthode getRequestContact() a été écrite dans le service pour lire les fichiers json locaux.

//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">
   <p style="display: flex;flex-direction: column;">
    <span>姓名:{{item?.name}}</span>
    <span>年龄:{{item?.age}}</span>
    <span>信息:{{item?.message}}</span>
   </p>
  </ion-item>
 </ion-list>
</ion-content>

Rendu

Trois résumés

1 . Toutes les pages créées doivent être référencées dans app.module.ts ;

2.service doit être référencée dans app.module.ts

Recommandations associées :

Implémentation d'Angular4 du partage d'exemples d'effet d'inclinaison 3D au survol de la souris

Explication détaillée d'un composant de liaison secondaire de ville et de comté fabriqué par Angular4

Angular4 Opérations de préparation du projet et de mise en place de l'environnement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!