一，環(huán)境搭建。

ionic環(huán)境搭建比較麻煩，建議新手不要隨便在網上找一個教程就開始搭建環(huán)境，很容易出錯，并且一旦出錯會很麻煩，所以，謹慎！

二，廢話不多少，來看三級聯(lián)動地址選擇。首先準備地址數(shù)據(jù)包，網上很多，我的數(shù)據(jù)包格式如下：

三，1，進入你的ionic項目文件夾，運行ionic g provider local-service（服務名稱）創(chuàng)建服務。目錄結構providers文件夾下面會出下local-service.ts文件。

2，local-service.ts代碼部分

這里我請求了存放在assets/data文件夾中的city-data.json文件，使用的是rxjs的方法。之后的component中將調用服務的setAll()函數(shù)。

3，person.ts代碼部分

獲取地址數(shù)據(jù)賦值給all，并調用setProvincess（）篩選省份信息。setProvincess（）函數(shù)見下圖。

setCity（）篩選城市信息。

篩選地區(qū)信息，并保存在result數(shù)組

最后重置地址信息。selectProvince()是一個響應函數(shù)，在每次重新選擇省時，都需要重置城市選擇器和地區(qū)選擇器。

html代碼部分

省選擇器的select值改變selectProvince(aaa)函數(shù)，這函數(shù)可以篩選出后續(xù)的城市信息，重點要強調的是城市選擇器和地區(qū)選擇器中的[(ngModel)]，由于每次重新選擇前面一個選擇器時，都需要將后面的選擇器進行重置，所以這里使用數(shù)據(jù)的雙向綁定的方法，進行選擇器的重置，只要將其中的值置為undefined，就可以使選擇器重置。

這個組件的原理大致就是這樣子，寫的有點粗糙，原理我也不是很清楚但效果實現(xiàn)了，折磨了我好久的三級聯(lián)動終于搞定，希望有收幫助，發(fā)現(xiàn)錯誤希望糾正。