效果图
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中引用;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。