位置: 编程技术 - 正文

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双向数据绑定原理)

  • 受票方与付款方不一致
  • 职工教育经费申请事由
  • 不征税收入有哪些增值税
  • 服务费发票的税率是多少
  • 独立法人有什么风险
  • 流动资产增幅
  • 怎样确定是否计入固定资产清理科目
  • 公司注销后专利还能转让吗
  • 预收购货单位货款
  • 递延收益摊销金额怎么算
  • 月末在产品和产成品计算
  • 供应商货款打折分录
  • 固定资产预计净残值最后怎么处理
  • 员工异地交纳保险怎么交
  • 预征税额是什么意思
  • 旅游业开办费
  • 增值税完税凭证怎么做账
  • 个人所得税代扣代缴的适用范围
  • 贷款买车的利息是多少3年
  • 管理费用企业所得税标准
  • windows 11密钥
  • 王者荣耀怎么快速获得金币
  • 金税卡服务费抵扣政策
  • 抵押房产的保险能退吗
  • PHP:oci_set_edition()的用法_Oracle函数
  • 我为什么要满足你的要求
  • 企业所得税汇算清缴
  • 汇票到期收到款项会计分录
  • php chr
  • echarts css
  • zend framework手册
  • 成本会计工作流程表
  • php函数写法
  • 企业没有实缴
  • PHP magento后台无法登录问题解决方法
  • php加密zend
  • cmd more命令
  • mongodb集群开启auth认证
  • 帝国cms8.0版
  • 利润表中的本期金额和本年累计金额
  • 小型微利企业的认定标准2023年
  • sqlserver2005数据库磁盘满了什么文件能删
  • db2 -968
  • sqlyog与mysql
  • 预付房租计入长期待摊费用吗
  • 二手房交易需缴纳哪些费用
  • 风险纳税人认定条件2020
  • 其他应付款货方余额表示什么
  • 现金付发票再摊销怎么算
  • 经营利润所得税费用
  • 员工宿舍发生事故赔偿吗
  • 暂估入账后费用怎么做账
  • 会计审计属于什么类别
  • “制造费用”账户如何设置明细账?
  • 数据库的常用语句
  • 高危补丁该不该修补
  • win8支持固态硬盘吗
  • 猎豹如何添加兼容性站点
  • macos safari无法使用
  • 电脑bios怎么设置usb启动
  • win7那些自启可以禁用
  • win7开机出现标志后就重启
  • ubuntucommand not found
  • dnssne是什么意思
  • win7系统添加右键菜单在哪里设置
  • 我的第一个师父读后感
  • 细说javascript
  • vue如何处理跨域
  • 怎么查看u盘有没有传输过数据
  • js右键菜单
  • 友盟的功能
  • js中dom的用法
  • android 属性动画改变view大小
  • javascript如何学
  • jquerybind事件
  • 省委巡视组收到的案件线索怎么分配
  • 广东地方税务局官网
  • 福州台江区怎么去
  • 婚育证明可以开假的吗
  • 宜昌市西陵区国税局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设