温馨提示

Ionic和angular在不断发展，项目也在不断更新迭代，此文档必然是有时效性的，继而温馨提示读者在使用此文档时，注意项目架构。如有变化，请持续更新此文档。

• 一.所需资源

1. Ionic4

• 二.集成具体步骤
  2.html代码

<ion-slide *ngFor="let option of data ; let i=index "><ion-card>学号：{{option?.code}}</ion-card></ion-slide>

3.ts代码
3.1 初始化
初始化方法：

/*** 初始化查询分组内的学生* @author '田成荣* @since 2019年1月11日*/getData() {// 判断项目显示input狂--体重指数时HTML显示另两个inputif (this.projectId === '011') {this.visable_HW = 1;this.visable_HW = 0;} else {this.visable_HW = 0;this.visable_HW = 1;}const projectId = this.projectId;this.groupId = this.routeInfo.snapshot.params['groupId'];this.groupName = this.routeInfo.snapshot.params['groupName'];this.studentId = this.routeInfo.snapshot.params['studentId'];console.log('----------projectId', projectId);this.batchNo = this.storage.get('BATCHNO').then((el) => {this.batchNo = el;console.log('groupId-----------------', this.groupId);console.log('batchNo-----------------', this.batchNo);const groupId = this.groupId;const batchNo = this.batchNo;const studentId = this.studentId;// tslint:disable-next-line:max-line-lengthswitch (projectId) {case '011':this.projectName = '身高和体重';this.Unit = '';break;case '003':this.projectName = '肺活量';this.Unit = '毫升';break;case '004':this.projectName = '50米';this.Unit = '秒';break;case '005':this.projectName = '立定跳远';this.Unit = '米';break;case '006':this.projectName = '坐位体前屈';this.Unit = '厘米';break;case '007':this.projectName = '800米';this.Unit = '分.秒';break;case '008':this.projectName = '1000米';this.Unit = '分.秒';break;case '009':this.projectName = '仰卧起坐';this.Unit = '个';break;case '010':this.projectName = '引体向上';this.Unit = '个';break;}if (this.groupId !== undefined && this.groupId !== '') {const url = 'physical-web/singleProjectScore/selectScoreByGroupIdBatchProject/' + groupId + '/' + projectId + '/' + batchNo;console.log(url);this.http.get(url).subscribe(res => {if (res.json().code === '0000') {this.data = res.json().data;console.log('---------------data', this.data);for (let i = 0; i < this.data.length; i++) {if (projectId === '007' || projectId === '008') {this.data[i].result = this.convertSecToMin(this.data[i].result);// tslint:disable-next-line:max-line-length} else if (projectId === '005') { this.data[i].result = (Number(this.data[i].result) / 100).toString(); } else if (projectId === '003' || projectId === '009' || projectId === '010') {this.data[i].result = Number(this.data[i].result).toFixed(0);} else {this.data[i].result = this.data[i].result;}}this.queryStandard(projectId, this.data[0].gradeCode, this.data[0].sex);}});} else {const url = 'physical-web/singleProjectScore/selectScoreByStudentIdBatchProject/' + studentId + '/' + projectId + '/' + batchNo;console.log(url);this.http.get(url).subscribe(res => {if (res.json().code === '0000') {this.data = res.json().data;console.log('---------------data', this.data);for (let i = 0; i < this.data.length; i++) {if (projectId === '007' || projectId === '008') {this.data[i].result = this.convertSecToMin(this.data[i].result);// tslint:disable-next-line:max-line-length} else if (projectId === '005') { this.data[i].result = (Number(this.data[i].result) / 100).toString(); } else if (projectId === '003' || projectId === '009' || projectId === '010') {this.data[i].result = Number(this.data[i].result).toFixed(0);} else {this.data[i].result = this.data[i].result;}}this.queryStandard(projectId, this.data[0].gradeCode, this.data[0].sex);}});}this.getprojectRatio();console.log(el);});// this.studentId = this.activeRoute.snapshot.paramMap.get('studentId');console.log('val-----------------------', this.projectId);}

click事件：注意—>我是和侧边栏结合使用的，轮播图跳转到哪一页的方法写在了单击侧边栏里。

getCard(j: any) {let slides: any;slides = document.getElementById('slides');slides.slideTo(j, 0);// 点击后关闭。this.menu.close();}

4.效果图