【ionic3】地区选择器

朱雀 2022-05-29 05:36 317阅读 0赞

### 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][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>

[https_raw.githubusercontent.com_raychenfj_ion-multi-picker_master_example_src_assets_chinese-cities.json]: https://raw.githubusercontent.com/raychenfj/ion-multi-picker/master/example/src/assets/chinese-cities.json