ionic2 三级联动地址选择

一，环境搭建。

ionic环境搭建比较麻烦，建议新手不要随便在网上找一个教程就开始搭建环境，很容易出错，并且一旦出错会很麻烦，所以，谨慎！

二，废话不多少，来看三级联动地址选择。首先准备地址数据包，网上很多，我的数据包格式如下：

三，1，进入你的ionic项目文件夹，运行ionic g provider local-service（服务名称）创建服务。目录结构providers文件夹下面会出下local-service.ts文件。

2，local-service.ts代码部分

这里我请求了存放在assets/data文件夹中的city-data.json文件，使用的是rxjs的方法。之后的component中将调用服务的setAll()函数。

3，person.ts代码部分

获取地址数据赋值给all，并调用setProvincess（）筛选省份信息。setProvincess（）函数见下图。

setCity（）筛选城市信息。

筛选地区信息，并保存在result数组

最后重置地址信息。selectProvince()是一个响应函数，在每次重新选择省时，都需要重置城市选择器和地区选择器。

html代码部分

省选择器的select值改变selectProvince(aaa)函数，这函数可以筛选出后续的城市信息，重点要强调的是城市选择器和地区选择器中的[(ngModel)]，由于每次重新选择前面一个选择器时，都需要将后面的选择器进行重置，所以这里使用数据的双向绑定的方法，进行选择器的重置，只要将其中的值置为undefined，就可以使选择器重置。

这个组件的原理大致就是这样子，写的有点粗糙，原理我也不是很清楚但效果实现了，折磨了我好久的三级联动终于搞定，希望有收帮助，发现错误希望纠正。