Angular4自制一个市县二级联动组件详解

最近遇到了不少问题，真的是命运多舛。Angular真是让人又爱又恨的框架，恨的是资料太少，遇到问题无从下手。爱的是许多其他框架难以做到的功能，angular却可以轻松做到。

话不多说，最近遇到了一个旧项目改造的问题。拿到前同事做的页面效果：

第一眼就看到了这三个下拉框，按捺不住好奇心的我点了点。原来，第一个下拉框可以选择市属和省属，如果选择市属，那么后面就会出现市、县级两个下拉框，如果是省属，那就隐藏了，这个挺容易的。然后就是要选择市之后，区下拉框要有对应区县选项。emmmm，很典型的二级联动，不过既然分析完了思路，那就开始做吧！首先呢，数据肯定要从后端同事那里拿，调用他的接口把数据填充进去。看看数据是什么样子的：

数据略多，就不全部贴出来了。把实体bean创建一下，

实体完成了，开始准备获取数据并填充至实体：

由于此处是单服务请求，为了让代码比较清晰直观，这里我就不做封装处理了。数据获取了之后就该填充到展示界面了：

<!-- 所属类型(此处固定，一般为获取后端数据字典数据) -->
<select class="city_type" [value]="cac.cityType" [(ngModel)]="cac.cityType">
  <!-- 所传内容为整数型 -->
  <option value=0>市属</option>
  <option value=1>省属</option>
</select>

<!-- 市级选择(类型为省属时隐藏) -->
<select class="city" [value]="cac.cityId" [(ngModel)]="cac.cityId" *ngIf="city.cityType==0">
  <!-- 遍历城市数组 -->
  <option *ngFor="let opt of option" [value]="opt.cityId">{{opt.cityName}}</option>
</select>

这时候，我们发现县级获取起来好像并不能直接获取，怎么办呢？我突然想到，我在ts里面声明一个变量获取市级选择的id号，然后再拿id去找下属县区，这样就可以轻松拿到了。既然要实时获取变化，那我们就实现检测变化钩子：

最后再补上区县级下拉框：

<!-- 区县级下拉框 -->
<select [value]="cac.countryId" [(ngModel)]="cac.countryId" *ngIf="cac.cityType==0 && country.length > 0">
  <option *ngFor="let count of country" [value]="count.id">{{count.name}}</option>
</select>

到此为止，大功告成，再也不用去依赖别人的库了。

相关推荐：

Ajax结合php实现二级联动实例方法

js实现HTML中Select二级联动实例分享

AngularJS实现的省市二级联动功能示例

以上就是Angular4自制一个市县二级联动组件详解的详细内容，更多请关注Gxl网其它相关文章！