一,环境搭建。
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,就可以使选择器重置。
这个组件的原理大致就是这样子,写的有点粗糙,原理我也不是很清楚但效果实现了,折磨了我好久的三级联动终于搞定,希望有收帮助,发现错误希望纠正。