ionic 3+Angular 4 인터페이스 요청 및 로 컬 json 파일 읽 기 예제 구현

준비 작업
우선,ionic 3+Angular 4 의 개발 환경 이 있어 야 합 니 다.여기 서 는 군말 하지 않 겠 습 니 다.환경 이 준비 되 어 있 습 니 다.빈 항목 을 만 들 고 템 플 릿 을 선택 하 십시오.
이 실현 과정
1 새 json 파일 과 서비스
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 파일 요청
서비스 에 서 는 로 컬 json 파일 을 읽 는 getRequestContact()방법 이 적 혀 있 습 니 다.

//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.만 든 모든 페이지 는 app.module.ts 에서 참조 해 야 합 니 다.
2.service 는 app.module.ts 에서 참조 해 야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.