一,環(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)錯誤希望糾正。