本文為原創文章，轉載請標明出處

1、安裝  ion-multi-picker ;

    終端執行 

    npm install ion-multi-picker;

2、匯入 app.module.ts  

import { CookieService } from "ngx-cookie-service";

imports: [ ... MultiPickerModule, ... ],

3、建立 provider

    ionic g provider city                                                                                                       

省市區json檔案下載地址:
https://raw.githubusercontent.com/raychenfj/ion-multi-picker/master/example/src/assets/chinese-cities.json

    將json值賦給下面的 cities 變數即可。

      city.ts

@Injectable() export class CityProvider {
public cities=[]; constructor( public http: HttpClient) { this.cities=[...];     } }

4、html

< ion-multi-picker item-content [ multiPickerColumns]= "cityColumns" [ cancelText]= "'取消'" [ doneText]= "'完成'" [( ngModel)]= "address" ></ ion-multi-picker >

    ts

import { CityProvider } from "../../providers/city/city";

public cityColumns=[];

constructor( private cityProvider:CityProvider) {     this.cityColumns= this.cityProvider.cities; }

更多

GitHub - ion-multi-picker

一個報錯

是因為在html中雙向繫結的資料為空，在ts中宣告就可以了