位置: 编程技术 - 正文

Angular4自制一个市县二级联动组件示例(angular动态生成表单)

编辑:rootadmin

推荐整理分享Angular4自制一个市县二级联动组件示例(angular动态生成表单),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angular自定义装饰器,angular 自定义指令,angular1教程,angular自定义装饰器,angular项目搭建,angular生成组件,angular做app,angular生成组件,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

Angular4自制一个市县二级联动组件示例(angular动态生成表单)

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

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

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

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

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

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

标签: angular动态生成表单

本文链接地址:https://www.jiuchutong.com/biancheng/377413.html 转载请保留说明!

上一篇:基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)(vue.js如何使用)

下一篇:Angular实现双向折叠列表组件的示例代码(angular2双向数据绑定原理)

  • 个体工商户个人经营所得税优惠政策
  • 增值税专用发票的税率是多少啊
  • 普通发票税额没有打印全可以用么
  • 发票进项税额抵扣的最晚时间
  • 工商年报实缴出资额是实收资本吗
  • 收到物业费普通发票做账
  • 未实缴出资的股东退股
  • 技术开发免税收益方
  • 购买办公用品账务处理
  • 已确认并转销的应收账款会计分录
  • 资产负债表期末余额怎么算
  • 保本型理财产品推荐
  • 食品发票需要清关吗
  • 取得以前年度审计报告应归入阶段底稿
  • 待认证税额是几级科目
  • 代开的专票作废了怎么做账?
  • 公司修理电脑属于什么费用
  • 税法三流合一是哪一项法律依据
  • 企业的低值易耗品主要包括什么等
  • 购物预付卡怎么用
  • 土地收储的含义
  • 银行流水账单怎么查
  • 预付的各种押金
  • 个人缴纳公积金有什么好处
  • 别的公司代缴社保合法
  • win10 kb5005611
  • 年报企业控股情况怎么填
  • 如何打开mac系统
  • 收到老板图片
  • u盘bios设置usb启动
  • phpstudy配置ftp服务器
  • PHP:iterator_count()的用法_spl函数
  • 世界上寿命最长的灯泡是什么品牌
  • 企业之间拆借资金
  • 任意盈余公积金的用途
  • java开发和运维
  • 最新版本金铲铲强势阵容
  • 图像识别算法
  • thinkphp自定义标签
  • 会计凭证出现的问题
  • 6.824 Lab 1: A simple web proxy
  • 苹果cmsjsui
  • 退回以前年度的增值税账务处理
  • three.js gui
  • 外账是代理记账吗
  • mongodb启动命令 linux
  • 税法上未投入使用的无形资产摊销所得税能扣除吗
  • 计入当期损益的
  • 客户发票弄丢了应该如何补救
  • 资产是指()
  • 企业影响工程成本的原因
  • 企业招聘残疾人税收优惠
  • 员工的提成
  • 企业如何做增值业务
  • 车船税去哪里交
  • 上年期末留底税额怎么算
  • 简易计税项目税率
  • 政府补助的分类及会计处理方法有哪些
  • 购入钢材
  • 政府返税计入什么科目
  • 如何查询对方是否起诉离婚
  • 企业转让固定资产发生的费用
  • 出纳日记账的日期以什么为准
  • mysql清空数据表怎么恢复
  • 删除了c盘文件
  • windows7创建新桌面
  • window8系统更新
  • windowsxp怎么开机
  • macos终端命令
  • mac菜单栏不见了
  • Win10 UWP红石版应用商店迎来更新:查找更新再换位置
  • javascript怎么弄
  • 如何删掉win7系统
  • 如何用python处理pdf
  • javascriptz
  • layout_gravity与gravity的区别
  • activity生命周期包含哪几种状态
  • 广东国家税务局电子税务局官网入口
  • 国税发票如何查真伪查询
  • 太原市地税局各分局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设