班课列表——ionic4如何实现数据绑定

演示效果

 

单击班课图标→显示班课的信息 

                        

 

 

 

我的班课页面开发逻辑

 

关于如何添加一个班课图标我在前面的博客有提到，感兴趣的朋友可以去前面看看。 开发“我的班课”页面主要干两件事：

 

 

 

解决数据绑定

 

首先要写显示班课信息的方法，先把ts代码贴在这里，然后一一讲解。

 

 

•  方法名：这个方法里面包括的就是显示班课信息的逻辑

• 首先这个url路径是后端给你传过来的。我们通过这个接口连接到后端具体的查询方法。与此同时呢，你要查谁的班课信息就得给谁的ID，因为这个功能是登录账号后才能用的，所以我这里写的localStorage是从浏览器缓存中读取这个人的ID。

• 具体的方法写在http的箭头函数里。http起到和http服务器通信的作用

• 有数据是什么意思呢？首先我们自定义了0000就代表如果后台查到了数据，1111是有异常。后台查询通过定义好的res.json()点出来。首先length不等于0就说明有数据，这里不用提示，直接显示数据。

• 否则呢？就调用else的接口，使用res.json().message调用后台给写好的没数据的提示语言。这一行的presentAlert是自己写好的封装方法，里面装的是提示框的样式。

• 出现异常这里代码与上面类似。

 

完整的ts代码如下

import { Router, ActivatedRoute, Params } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { InterceptorService } from 'src/app/shared/providers/interceptor.service';
import { BaseUI } from 'src/app/shared/tipService/baseui';
import { AlertController, ToastController } from '@ionic/angular';

@Component({
  selector: 'app-class-lesson',
  templateUrl: './class-lesson.page.html',
  styleUrls: ['./class-lesson.page.scss'],
})
export class ClassLessonPage extends BaseUI implements OnInit {
/*---------------CSS样例 start-----------------------------------------*/

/*---------------CSS样例 end-----------------------------------------*/


/*------------------------------变量声明 start-------------------------------------*/
  lesson = [];
/*------------------------------变量声明 end-------------------------------------*/

/*----------------------------------------------方法区 start--------------------------------------------------*/

  constructor(
    public router: Router,
    public activeRoute: ActivatedRoute,
    public http: InterceptorService,
    public toastCtrl: ToastController,
    public alertController: AlertController,
  ) { super(); }

  ngOnInit() {
    this.ShowStudentLesson();
  }

/**
   * 从班课页面返回学生端首页
   * @author 刘桐
   * @since 2019-03-23 15：23
   */
  back() {
    this.router.navigateByUrl('tabs/home/student-main');
  }

/**
   * 点击班课跳转到签到页面
   * @author 刘桐
   * @since 2019-03-23 15：23
   */
  gotoSignIn(id: any) {
    this.router.navigate(['sign-in'], {
      queryParams: {
        courseId: id,
      }
    });
  }

/**
   * 显示该学生的所有班课信息
   * @author 刘桐
   * @since 2019-03-23 15：23
   */
  ShowStudentLesson() {
    const url = 'exam-web/signinDetails/selectTeacherClass/' + localStorage.getItem('userId');  // 获取该账号缓存中的id
    this.http.get(url).subscribe(
      res => {
        if (res.json().code === '0000') {
          if (res.json().data.length !== 0) {
            this.lesson = res.json().data;
          } else {
            super.presentAlert(this.alertController, res.json().message);
          }
        } else if (res.json().code === '1111') {
          super.presentAlert(this.alertController, res.json().message);
        }
      }
    );
  }
  /*----------------------------------------------方法区 end--------------------------------------------------*/
}

 

 

 

 

我们再来看下html的代码。

 

 

如何设置样式

 

图文结合对比一下吧~

.toolbarback {
    display: block; //本页标题栏块状显示
    width: 100%;    //宽度
    text-overflow: ellipsis;    //可修剪文本长度
    white-space: nowrap;    //文本不进行换行
    overflow: hidden;   //被修剪的内容不可见
    pointer-events: auto;   //这句话和没有定义区别不大，鼠标不可以穿透当前层
    text-align: center; //文本居中
    font-family: DFKai-SB;  //字体
    --background: #4695Fa;  //背景颜色
    color: #0c0c0c;     //文字颜色
}

.myclass {
    --background: #ffffff;  //背景色
}

.coursefont {
    font-size: 17px;    //字体大小
}

.teacherfont{
    font-size: 14px;    //字体大小
    color: #616267;   //字体颜色
}

.timefont{
    float:right;        //右浮动
    margin-top:0px;     //上边距
    font-size: 14px;    //字体型号
    color: #616267;   //字体颜色
}