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

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

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

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

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

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

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

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

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

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

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

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