本人前端小白一枚,记录下实习遇到的难题。要求是实现选择学校,再选择学期,再选择年级,这些数据都会交互起来。
最后呈现的页面
首先获取班级信息列表
// 主请求数据字段
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,有兴趣的可以去看看学习一下,交流下知识。
https://angular.cn/docs //angular4以上的官方文档 http://ng.ant.design/docs/introduce/zh //nz-zorro框架的官方文档