项目经验Ionic中显示某个分组的所有成员（Ngfor循环实现）

Posted 2022-12-09 Yolanda94

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了项目经验Ionic中显示某个分组的所有成员（Ngfor循环实现）相关的知识，希望对你有一定的参考价值。

【背景】

体测项目中需要在手机端的教师端实现能查看新建的分组里加入的所有学生，因为整个项目是使用的ionic，所以采用ionic实现，还有其他的实现方式，这里主要介绍一下如何用ionic实现。

【内容】

一、项目前提：

据开发项目ITOO-体测具体情况，需要开发显示分组所有学生，此组件以Ionic框架为基础。

1、基于Ionic4项目：

2、显示的所有学生是依据新建分组生成的groupId来查询的，所以这里有一个前提是开发的系统必须是有GroupId或者其他类似的可以查询分组所有人的字段的（否则无法查询分组所有的学生）。

二、开发过程：

1、准备工作：

（1）npm包拉取：下载项目源码后，安装npm包：npm install或者cnpm install还有yarn install都可以。

cnpm install /npm install/yarn install

（2）创建页面- display-member（要显示新建分组里的所有学生界面）：在相应的页面文件夹下使用ionic g pages display-member命令建立display-member页面。

ionic g pages display-member

创建成功display-member页面后的截图：

也可以只输入ionic g，根据系统提示一步步建立display-member页面。

2、具体代码编写：

（1）开发display-member.page.html页面：

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button></ion-back-button>
      </ion-buttons>
    <ion-title>groupName(groupNo)</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item-group>
      <!-- ion-item-divider用于显示学生总数，与下方显示的所有学生区分 -->
      <ion-item-divider style="font-size: 14px; color: gray" color="light">学生总数：totalstudent人</ion-item-divider>
  </ion-item-group>

  <!-- 加载加入分组的所有学生 -->
  <ion-card style=" border-radius:12px;">
    <!-- NgFor循环实现显示所有学生 -->
    <ion-item *ngFor="let item of studentPage;">
      <ion-thumbnail slot="start">
        <img src="assets/images/头像.png" style=" border-radius:12px;">
      </ion-thumbnail>
      <ion-label>
        <h2>item.studentName</h2>
        <p>item.studentCode</p>
      </ion-label>
    </ion-item>
  </ion-card>
</ion-content>
<ion-footer>
    <div style="text-align:center">
      <!-- isNotEmpty判断分组内学生是否为空，为空则“立即测试”按钮不显示 -->
        <button ion-button block *ngIf="isNotEmpty" (click)="goToSelectProject()" style="margin-top:5%;margin-right:5%;color: white; border-radius:10px;background-color:#1B81D1; width:40%; height:45px; font-size: 18px">立即测试</button>
        <button ion-button block (click)="goToIndex()" style="margin-top:5%;color: white; border-radius:10px;background-color:#1B81D1; width:40%; height:45px; font-size: 18px">稍后测试</button>
    </div>
</ion-footer>

（2）开发display-member.page.ts页面：

import  Component, OnInit  from '@angular/core';
import  BaseUI  from 'src/app/shared/tipService/baseui';
import  ActivatedRoute, Router  from '@angular/router';
import  InterceptorService  from 'src/app/shared/providers/interceptor.service';
import  ToastController, AlertController  from '@ionic/angular';
import  Storage  from '@ionic/storage';
import  ResponseCode  from 'src/app/shared/ResponseCode/response-code.enum';

@Component(
  selector: 'app-display-member',
  templateUrl: './display-member.page.html',
  styleUrls: ['./display-member.page.scss'],
)
export class DisplayMemberPage extends BaseUI implements OnInit 
/*------------------------------变量声明区---------------------------------*/
  // 分组ID、分组号和分组名
  groupId: string;
  groupNo: string;
  groupName: string;
  // 查询得到的所有学生
  studentPage = [];
  // 所有学生数
  totalstudent = 0;
  // 学生学号和姓名
  studentCode: string;
  studentName: string;
  // 判断学生人数是否为空，决定“立即测试”按钮是否显示
  isNotEmpty: boolean;
  // 定时刷新
  interval: any;

  constructor(
    public activeRoute: ActivatedRoute,
    public http: InterceptorService,
    public toastCtrl: ToastController,
    private router: Router,
    public storage: Storage,
    public alertController: AlertController,
  ) 
    super();
    

  ngOnInit() 
     // 获取从前一页面传过来的groupId、groupNo、groupName
      this.groupId = localStorage.getItem('groupId');
      this.groupNo = localStorage.getItem('groupNo');
      this.groupName = localStorage.getItem('groupName');
      // 查询所有用户
      this.getData();
      // 判断分组是否为空来决定“立即测试”按钮是否显示
       if (this.totalstudent === 0) 
        this.isNotEmpty = true;
       else 
        this.isNotEmpty = false;
      
  

  /**
   * 查询新建分组中加入的所有学生
   * @author 杨燕梅
   * @since 2019-2-13 12:13:01
   * @memberof studentPage
   */
  getData() 
    // const groupId = '1095212488603013121';
    // 添加定时自动刷新
    this.interval = setInterval(() => 
    // 根据传过来的groupId查询新建分组中加入的所有学生
    this.groupId = localStorage.getItem('groupId');
    const dataUrl = 'physical-web/groupStudent/selectByGroupIdAndRefresh/' + this.groupId;
    // 将查询到的数据处理后由html页面显示
    this.http.get(dataUrl).subscribe(res => 
      if (res.json().code === ResponseCode.SUCCESSCODE) 
        this.studentPage = res.json().data;
        // 获取学生总人数
        this.totalstudent = res.json().data.length;
       else 
        super.showToast(this.toastCtrl, '分组为空，请先让学生加入分组！');
        return;
      
    );
    , 1000);
  

  /**
   * 点击立即测试(跳转到选择项目)
   * @author 杨燕梅
   * @since 2019-2-1 16:10:15
   */
  goToSelectProject(blah) 
    // 跳转到选择项目页面的同时将groupId、groupName传过去
    this.groupId = localStorage.getItem('groupId');
    this.groupName = localStorage.getItem('groupName');
    this.router.navigateByUrl('tabs/home/public-project/' + 'FaceToFace' + '/' + this.groupId + '/' + this.groupName);
    // 开始测试--释放定时调用查询学生方法
    clearInterval(this.interval);
  

  /**
   * 点击稍后测试(跳转到个人首页)
   * @author 杨燕梅
   * @since 2019-2-1 16:10:15
   */
  goToIndex() 
  this.router.navigateByUrl('/tabs/me');

2、父组件的配置：

（1）父组件：student-main.page.html：主要是父组件html页面需要一个能跳转到生成二维码页面的组件（可以是按钮也可以是其他）必须有click事件。

// 可跳转到显示新建分组里所有学生界面的按钮
<div class="tab">
    <ion-button class="creat" style="margin:0 auto;width:70%" (click)="gotogroup()">进入群组</ion-button>
</div>

（2）路由跳转：create-number.module.ts：主要是父组件ts文件里需要写能跳转到生成显示新建分组内所有成员页面的路由。

const routes: Routes = [
  
    path: '',
    component: CreateNumberPage
  ,
   path: 'display-member',
    loadChildren: './display-member/display-member.module#DisplayMemberPageModule'
  
];