Angular4自制一个市县二级联动组件示例


Posted in Javascript onNovember 21, 2017

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

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

Angular4自制一个市县二级联动组件示例

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

Angular4自制一个市县二级联动组件示例

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

// 市级实体类
export class City {

  // 市级id
  cityId: string;

  // 所属类型(0.市属 1.省属)
  cityType: number;

  // 市级名称(可选属性,若cityType为1时,可不填)
  cityName: string;

  // 所属区县
  counties?: Array<Country>;

}

// 区县级实体类
export class Country {

  // 区县id
  countryId: string;

  // 区县名称
  countryName: string;

}

// 填写市县类
export class CityAndCountry {

  // 市级id
  cityId: string;

  // 县级id
  countryId: string;

  // 市级类型
  cityType: number;

  // 市县级实体构造器 
  constructor() {
    // 给市级id赋予一个真实城市的id初始值
    this.cityId = '***';
    // 同上
    this.countryId = '***';
    // 同上
    this.cityType = 0;
  }
}

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

// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy {

  // 结果码 (用于页面处理显示标识)
  result_code: number;

  // 市级实体声明
  city: City[];

  // 县区级实体声明
  country: Country[];

  // 市县、区级填写实体声明
  cac: CityAndCountry;

  // 声明订阅对象
  subscript: Subscription;

  /**
  * 构造器
  * @param {CityService} service 注入服务
  */
  constructor (private service: CityService) {
    // 结果码 (-1.网络或其他异常 0.无内容 1.请求成功 2.请等待)
    this.result_code = 2;
    // 初始化填写市区、县级填写实体
    cac = new CityAndCountry();
    // 初始化数组(这步很重要,有很多人说使用数组相关函数会报未定义异常,是因为没有初始化的原因)
    this.city = [];
    this.country = [];
    // 初始化订阅对象
    this.subscript = new Subscription();
  }

  /**
  * 生命周期初始化钩子(生命周期尽量按执行顺序来写,养成好习惯)
  */
  ngOnInit(): void {
    this.getCityArea();
  }

  /** 获取市县数据 */
  getCityArea() {
    /** 将请求交付服务处理(service代码比较简单,就不贴了) */
    this.subscript = this.service.getCityArea().subscribe(res => {
      /** 获取json请求结果 */
      const result = res.json();
      /** 判断结果返回码 */
      switch (result['code']) {
        /** 请求成功,并且有值 */
        case 200:
        /** 改变初始返回码 */
        this.result_code = 1;
        /** 获取并填充数据 */
        this.city = json['city'];
        break;
        /** 其他情况不重复赘述 */
      }
    }, err => {
      /** 显示预设异常信息提示给用户 */
      this.result_code = -1;
      /** 打印log,尽量使用日志产出 */
      console.error(err);
    });
  }

  /** 生命周期销毁钩子 */
  ngOnDestroy(): void {
    /** 取消订阅 */
    this.subscript.unsubscribe();
  }
}

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

<!-- 所属类型(此处固定,一般为获取后端数据字典数据) -->
<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去找下属县区,这样就可以轻松拿到了。既然要实时获取变化,那我们就实现检测变化钩子:

// 二级联动组件
export class CityAreaComponent implements OnInit, OnDestroy, DoCheck{
  // 声明县区级数组
  country: Array<Country>;

  constructor() {
    /** 重复代码不赘述 */
    /** 初始化数组 */
    country = [];
  }  

  /** 生命周期检测变化钩子 */
  ngDoCheck(): void {
    /** 遍历市级数组 */
    for (let i = 0; i < this.city.length; i++) {
      /** 若选择的市级id和市级数组中的id相吻合 */
      if (this.city[i].id == this.cac.countryId) {
        /** 将该索引下的counties数组赋予给区县级数组 */
        this.country = this.city[i].counties;
      }
      /** 我们无法避免直辖市的情况,所以多一重判断 */
      if (this.country.length > 0) {
        /** 为了用户体验,我们要尽量在用户选择市级城市后,默认选择一个区县级城市 */
        this.cac.country.id = this.country[0].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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
js实现下拉菜单效果
Mar 01 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
Ionic3实现图片瀑布流布局
Aug 09 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 #Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 #Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 #Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 #Javascript
微信小程序实现tab切换效果
Nov 21 #Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
You might like
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
深度解读vue-resize的具体用法
2020/07/08 Javascript
python 中的int()函数怎么用
2017/10/17 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
管理部部长岗位职责
2013/12/05 职场文书
医院护士的求职信范文
2013/12/26 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
英语国培研修感言
2014/02/13 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
Consul在linux环境的集群部署
2022/04/08 Servers