Angular——级联框

正文

  近期小菜接触的新页面需要做级联框查询，用Angular做还是第一次，对我来说好像是有点难度的，难到我的是当级联框第一个框选择一个值之后后边的框不仅要把相应的值都查回来放在下拉框里，还要分别赋个默认值，刚开始有点蒙圈，试了很多才发现其实就是绑定的问题。所以今天小菜要分享的主题就是“级联框”，也会说说自己实践的过程，给大家提供点少走坑的经验教训！
  

实践前的准备

1.页面
  首先展示一下页面的一部分，页面功能是排课，此页面是联动页面的最后一个页面，我就不多说排课，我就只说此页面的级联框，下面会说关于级联框的需求。

2.需求
  ◆无参查询校区：页面加载时把所有校区名称集合放入下拉框
  ◆有参查询教师：页面加载时根据前面页面传给我的限定条件将符合要求的教师集合查询回来，然后把教师名称放入下拉框
  ◆有参级联查询：根据第一个下拉框选择的校区id查询相应的教学楼集合，然后再根据选择的教学楼id查询教室集合
  ◆PS：级联查询过程中不仅要把相应的集合放入下拉框，还要将集合的第一条数据做成默认值

实践中的历程

1.前台

<div class="dropdown">
  <!--校区下拉框-->
  <select class="form-control" [style.width]="dropDownWidth + 'em'" [style.height]="dropDownHeight+'em'" [style.padding-left]="dropDownWidth/3 + 'em'"
    [(ngModel)]="schoolBranchId" name="schoolBranchId" (change)="changeschoolBranchId()">
    <option style="color: #b6b6b6" value="" selected>--请选择校区--</option>
    <option *ngFor="let option of campusOptions" value={{option.id}}>{{option.dictionaryName}}</option>
  </select>

  <!--教学楼下拉框-->
  <select class="form-control" [style.width]="dropDownWidth + 'em'" [style.height]="dropDownHeight+'em'" [style.padding-left]="dropDownWidth/3 + 'em'"
    [(ngModel)]="buildingId" name="buildingId" (change)="changeBuildingId()">
    <option style="color: #b6b6b6" value="" selected>--请选择教学楼--</option>
    <option *ngFor="let option of buildingOptions" value={{option.id}}>{{option.buildingName}}</option>
  </select>

  <!--教室下拉框-->
  <select class="form-control" [style.width]="dropDownWidth + 'em'" [style.height]="dropDownHeight+'em'" [style.padding-left]="dropDownWidth/3 + 'em'"
    [(ngModel)]="roomId" name="roomId" (change)="changeroomId()">
    <option style="color: #b6b6b6" value="" selected>--请选择教室--</option>
    <option *ngFor="let option of roomOptions" value={{option.id}}>{{option.roomName}}</option>
  </select>

  <!--教师下拉框-->
  <select class="form-control" [style.width]="dropDownWidth + 'em'" [style.height]="dropDownHeight+'em'" [style.padding-left]="dropDownWidth/3 + 'em'"
    [(ngModel)]="teacherId" name="teacherId" (change)="changeteacherId()">
    <option style="color: #b6b6b6" value="" selected>--请选择教师--</option>
    <option *ngFor="let option of teacherOptions" value={{option.id}}>{{option.name}}</option>
  </select>
</div>

2.后台

export class CourseTableComponent implements OnInit {
  //级联下拉框声明
  campusOptions: any;
  buildingOptions: any;
  roomOptions: any;
  teacherOptions: any;
  schoolBranchId: string = '';
  buildingId: string = '';
  roomId: string = '';
  teacherId: string = '';
  //教师：测试需要的参数
  private courseid: string = "39BdmiUzzzzzzz";
  private schoolyear: string = "201720182";

  /**
   * 依赖注入
   */
  constructor(public authGuardService: AuthGuardService,
    // 实例化拦截器服务
    private http: InterceptorService,
    private router: Router) {
  }

  /**
   * 初始化
   */
  ngOnInit() {
    this.getTeacherOptions();
    this.getCampusOptions();
  }

  /***************************************级联下拉框*********************/
  /**
   * 选择校区
   */
  changeschoolBranchId() {
    //如果校区id为空，将教学楼和教室集合置空
    if (this.schoolBranchId == '') {
      this.schoolBranchId == ''
      this.buildingId = '';
      this.buildingOptions = [];
      return;
    }
    //调用查询教学楼的方法：根据选择的校区id查相应的教学楼
    this.getBuildingOptions(this.schoolBranchId);
  }

  /**
   * 选择教学楼
   */
  changeBuildingId() {
    //如果教学楼id为空，教室集合置空
    if (this.buildingId == '') {
      this.roomId = '';
      this.buildingId = '';
      this.roomOptions = [];
      return;
    }
    //调用查询教室的方法：根据选择的教学楼id查相应的教室
    this.getRoomOptions(this.buildingId);
  }

/*****************************************集合查询*********************/
  /**
   * 无参查询校区集合
   */
  getCampusOptions() {
    //调后端查询接口
    const url = 'teach-web/teachclass/selectCampus/';
    this.http.get(url).subscribe(
      res => {
        if (res == undefined) {
          alert('操作异常');
        }
        //将后端查回的数据放入校区数组中
        this.campusOptions = res.json().data;
      }
    );
  }

  /**
  * 根据校区id查询教学楼集合
  */
  getBuildingOptions(schoolBranchId: any) {
    if (this.schoolBranchId == null) {
      this.buildingOptions = [];
      return;
    }
    //调后端查询接口
    const url = 'teach-web/arrangeCourse/queryBuildingName/' + this.schoolBranchId;
    this.http.get(url).subscribe(
      res => {
        if (res == undefined) {
          alert('操作异常，请重新尝试！');
        }
        //将后端查回的数据放入教学楼数组中
        this.buildingOptions = res.json().data;
        //双向绑定，给教学楼下拉框赋默认值
        this.buildingId = res.json().data[0].id;
        //调查询教室集合的方法
        this.getRoomOptions(this.buildingId);
      }
    );
  }

  /**
  * 根据教学楼id查询教室集合
  */
  getRoomOptions(buildingId: any) {
    if (this.buildingId == null) {
      this.roomOptions = [];
      return;
    }
    //因为教室和教学楼在一个接口中查回来的，只是教室的信息放在了一个list里，所以这里就直接用教学楼查回来的数据，从其中取出教室的数据
    this.roomOptions = this.buildingOptions.find(x => x.id == buildingId).roomEntityList;
    //双向绑定，给教室下拉框赋默认值
    this.roomId = this.roomOptions[0].id;
  }

  /**
   * 教师集合（待修改：用的测试数据）
   */
  getTeacherOptions() {
    //调后端查询接口
    const url = 'teach-web/teacherCourse/queryTeacherInfo/' + this.courseid + '/' + this.schoolyear;
    this.http.get(url).subscribe(
      res => {
        if (res == undefined) {
          alert('操作异常');
        }
        //将后端查回的数据放入教师数组中
        this.teacherOptions = res.json().data;
      }
    );
  }

}

小结

  小菜做的级联框只是初步形成，还有需要修改的地方，譬如有些地方的逻辑有些不合理，要上线当然还需要修改啦，本篇博客只是粗略说说思路就像小demo一样！哪位帅哥美女如果能够给小菜提些建议帮助小菜成长那更好啦！