【ionic3】地區選擇器

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

省市區json檔案下載下傳位址:

https://raw.githubusercontent.com/raychenfj/ion-multi-picker/master/example/src/assets/chinese-cities.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>