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>