一、实现要求

还用Angular2实现select下拉框联动的效果：

二、实现过程

2.1 项目结构

由于项目是使用了Angular2，前端工程化，组件化，在项目中，分成了下面的五个部分：css、html、routes、spec、component.ts。

每个文件具体是什么作用，小编将会在以后的博客中向大家介绍。

2.2 html前台 页面

这里我们对于select中使用“（change）=’fun()’”实现下拉框变化的时候，调用其他的方法。

使用$event.target.value就可以获取到[(ngModel)]双向绑定的数据。

 <div@H_301_36@ class@H_301_36@="form-group"@H_301_36@>@H_301_36@ <label@H_301_36@ class@H_301_36@="col-sm-3 control-label"@H_301_36@>@H_301_36@学科门类：</label@H_301_36@>@H_301_36@ <div@H_301_36@ class@H_301_36@="col-sm-9"@H_301_36@>@H_301_36@ <select@H_301_36@ class@H_301_36@="form-control"@H_301_36@ [(ngModel@H_301_36@)]="Profession.subjectCategoryId"@H_301_36@ name@H_301_36@="subjectCategoryId"@H_301_36@ (change@H_301_36@)=" getProfessionCategoryOptions($event.target.value)"@H_301_36@ >@H_301_36@ <option@H_301_36@ *ngFor@H_301_36@="let option1 of subjectCategoryOptions"@H_301_36@ [value@H_301_36@]="option1.professionCode"@H_301_36@>@H_301_36@@H_301_36@{{option@H_301_36@1.professionName@H_301_36@}}@H_301_36@</option@H_301_36@>@H_301_36@ </select@H_301_36@>@H_301_36@ </div@H_301_36@>@H_301_36@ </div@H_301_36@>@H_301_36@ <div@H_301_36@ class@H_301_36@="form-group"@H_301_36@>@H_301_36@ <label@H_301_36@ class@H_301_36@="col-sm-3 control-label"@H_301_36@>@H_301_36@专业类别：</label@H_301_36@>@H_301_36@ <div@H_301_36@ class@H_301_36@="col-sm-9"@H_301_36@>@H_301_36@ <select@H_301_36@ class@H_301_36@="form-control"@H_301_36@ [(ngModel@H_301_36@)]="Profession.professionCategoryId"@H_301_36@ name@H_301_36@="professionCategoryId"@H_301_36@ (change@H_301_36@)=" getProfessionTitleOptions($event.target.value)"@H_301_36@>@H_301_36@ <option@H_301_36@ *ngFor@H_301_36@="let option2 of professionCategoryOptions"@H_301_36@ [value@H_301_36@]="option2.professionCode"@H_301_36@>@H_301_36@@H_301_36@{{option@H_301_36@2.professionName@H_301_36@}}@H_301_36@</option@H_301_36@>@H_301_36@ </select@H_301_36@>@H_301_36@ </div@H_301_36@>@H_301_36@ </div@H_301_36@>@H_301_36@ <div@H_301_36@ class@H_301_36@="form-group"@H_301_36@>@H_301_36@ <label@H_301_36@ class@H_301_36@="col-sm-3 control-label"@H_301_36@>@H_301_36@专业名称：</label@H_301_36@>@H_301_36@ <div@H_301_36@ class@H_301_36@="col-sm-9"@H_301_36@>@H_301_36@ <select@H_301_36@ class@H_301_36@="form-control"@H_301_36@ [(ngModel@H_301_36@)]="Profession.majorCode"@H_301_36@ name@H_301_36@="majorCode"@H_301_36@>@H_301_36@ <option@H_301_36@ *ngFor@H_301_36@="let option3 of professionTitleOptions"@H_301_36@ [value@H_301_36@]="option3.professionCode"@H_301_36@>@H_301_36@@H_301_36@{{option@H_301_36@3.professionName@H_301_36@}}@H_301_36@</option@H_301_36@>@H_301_36@ </select@H_301_36@>@H_301_36@ </div@H_301_36@>@H_301_36@ </div@H_301_36@>@H_301_36@ @H_301_36@

2.3 调用的方法

/** * 获取专业类别下拉框-王雷-2017年9月25日11:49:27 */@H_301_36@
  getProfessionCategoryOptions(SubjectCategory: string) {
    let url = "http://192.168.22.202:8080/basicInfo-web/organization/queryAllMajorCategory/"@H_301_36@ + SubjectCategory;
    this@H_301_36@.epService.getData(url,"GET"@H_301_36@).then(
      res => {
        this@H_301_36@.professionCategoryOptions = res.data;
      }
    );
  }

  /** * 获取专业名称下拉框-王雷-2017年9月25日11:49:32 */@H_301_36@
  getProfessionTitleOptions(ProfessionCategory: string) {
    let url = "http://192.168.22.202:8080/basicInfo-web/organization/queryAllProfessionDictionary/"@H_301_36@ + ProfessionCategory;
    this@H_301_36@.epService.getData(url,"GET"@H_301_36@).then(
      res => {
        this@H_301_36@.professionTitleOptions = res.data;
      }
    );
  }

三、小结

通过这次的实现发现，自己搜索与Angular2相关的知识还是比较少的。在这些还是要多多的和以前的知识进行结合，这些东西也很相似，其实，我也知道是使用change就是不知道具体怎么写。这个就是编码格式的不同了。Angular加油。

【Angular2】angular2 select change 事件实现下拉联动