[学习笔记，个人记录]--实现三级联动（angular6）

最新推荐文章于 2019-08-18 13:46:34 发布

qq_37958260

最新推荐文章于 2019-08-18 13:46:34 发布

阅读量464

点赞数

本文链接：https://blog.csdn.net/qq_37958260/article/details/83029336

版权

本人前端小白一枚，记录下实习遇到的难题。要求是实现选择学校，再选择学期，再选择年级，这些数据都会交互起来。

最后呈现的页面

首先获取班级信息列表

// 主请求数据字段
postdata = {
  schoolID: '',
  annualID: '',
  gradeID: '',
  baYearID:'',
  pager: {
    pager: true,
    pageIndex: 1,
    pageSize: 10
  }
};

//列表总共多少数据
  totalItems:number = 0 ;
classListData:classList[] = [];

getClassDataList(){//获取班级信息列表
 this.service.getClassList(this.postdata).subscribe(res => {
   if(res){
     this.classListData = <classList[]>res['data'];
     this.totalItems = res['dataCount'];
   }
 });
}

然后再写获取学年学期列表和获取基础年级的代码

// 获取学年学期列表
  annualList:annualList[] = [];
  getAnnualDataList(school_id){
 return this.service.getAnnualList({
    schoolID: school_id,
    annualID: '',
    gradeID: '',
    baYearID:'',
    pager: {
      pager: false,
      pageIndex: 1,
      pageSize: 10
    }
  })
  }
  //已选择的学期id
  selectedAnuID:string='';
  //学期改变事件
  annualChange(annualID){
    this.postdata.annualID=annualID;
    this.getClassDataList();
  }
  //获取基础年级根据学校id
  gradeBySchoolList:gradeBySchoolList[] = [];
  getGradeBySchoolList(school_id){
  return  this.service.getGradeBySchool({
      schoolid:school_id
    }) ;
  }
  //已选择的年级id
  selectedGradeID:string='';
   //年级改变事件
  gradeChange(grade_id){
    this.postdata.gradeID=grade_id;
    this.getClassDataList();
  }

当学校改变的时候，获取到当前学校的学年和年级。

schoolSelectedChange(id:string){
      this.postdata.schoolID = id;
      this.getAnnualDataList(this.postdata.schoolID).subscribe(res=>{
        if(res){
              this.annualList = res['data'];
              //默认显示第一个学校的学期
              if(this.annualList.length){
                this.selectedAnuID=this.annualList[0].id;
              }
              this.getGradeBySchoolList(id).subscribe(grade=>{
                if(grade&&grade['data'].length){
                  this.gradeBySchoolList =grade['data'];
                  this.getClassDataList();
                    }
              })
            }
      });
    this.getGradeBySchoolList(this.postdata.schoolID);
    this.getClassDataList();
  }

本人不太会写博客，描述也没多少，请多多见谅。

附一下angular4(6)的官方文档和用的框架nz-zorro，有兴趣的可以去看看学习一下，交流下知识。