1、安裝 ion-multi-picker

npm install ion-multi-picker --save

2、匯入 app.module.ts

...
import {MultiPickerModule} from 'ion-multi-picker';
...

@NgModule({
    ...
    imports: [
        ...
        MultiPickerModule,
        ...
    ]
    ...
})
...

3、建立 provider

ionic g provider reviceServe
 

在服務中新增 網路請求介面 和 本地JSON請求 兩種方法

// revice-serve.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import "rxjs/add/operator/map";


@Injectable()
export class ReciveServeProvider {

    constructor(public http: Http) {}

    // 網路請求介面
 

    getHomeInfo(): Observable<Response> {
        return this.http.request('');
    }

    // 本地JSON檔案請求
    getRequestContact() {
        return this.http.get("assets/json/city.json");
    }

}

4、新增JSON資料

在 src/assets/json 中建立 city.json，並將下面這個JSON資料複製貼上進 city.json

5、使用地區選擇器

在 xxx.ts 中

...
 

import { ReciveServeProvider } from '../../providers/recive-serve/recive-serve';

@IonicPage()
@Component({
    ...
    providers: [..., ReciveServeProvider]
}）

export class xxx {

    listData = [];

    constructor(private reviceServe: ReciveServeProvider) {}

    ionViewDidLoad() {
        this.getRequestContact();
    }

    getRequestContact() {
        this.reviceServe.getRequestContact().subscribe(res => {
            this.listData = res.json();
        }, error => {
            console.log(error);
        })
    }

}

xxx.html
<ion-item>
    <ion-label>地區選擇器</ion-label>
    <ion-multi-picker item-content [multiPickerColumns]="listData"></ion-multi-picker>
</ion-item>