本文为原创文章，转载请标明出处

目录

1. 安装 ion-multi-picker
2. 导入 app.module.ts
3. 创建 provider
4. 创建 page
5. 一个坑
6. 更多
7. 效果图

1. 安装 ion-multi-picker

终端运行:

npm install ion-multi-picker@2.1.0 --save

2. 导入 app.module.ts

...

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

...

@NgModule({

  ...

  imports: [

    ...

    MultiPickerModule,

    ...

  ]

  ...

})

...

3. 创建 provider

终端运行:

ionic g provider city-data

省市区json文件下载地址:

https://raw.githubusercontent.com/raychenfj/ion-multi-picker/master/example/src/assets/chinese-cities.json

将json值赋给下面的 cities 变量即可。

city-data.ts:

import {Injectable} from '@angular/core';

@Injectable()

export class CityDataProvider {

  cities: any[];

  constructor() {

    this.cities = 上面的json（太长我就不复制粘贴了）

  }

}

4. 创建 page

终端运行:

ionic g page edit

edit.html

<ion-header>

  <ion-navbar>

    <ion-title>编辑</ion-title>

    <ion-buttons end>

      <button ion-button>保存</button>

    </ion-buttons>

  </ion-navbar>

</ion-header>

<ion-content>

  <ion-list>

    <ion-item>

      <ion-icon name="pin" item-start></ion-icon>

      <ion-label>居住地</ion-label>

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

    </ion-item>

  </ion-list>

</ion-content>

edit.ts

import {Component} from '@angular/core';

import {IonicPage, NavController, NavParams} from 'ionic-angular';

import {CityDataProvider} from "../../providers/city-data/city-data";

@IonicPage()

@Component({

  selector: 'page-edit',

  templateUrl: 'edit.html',

})

export class EditPage {

  cityColumns: any[];

  constructor(public navCtrl: NavController, public navParams: NavParams, public cityDataProvider: CityDataProvider) {

    this.cityColumns = this.cityDataProvider.cities;

  }

}

5. 一个坑

错误如下:

Uncaught (in promise): Error: Template parse errors:

Can't bind to 'multiPickerColumns' since it isn't a known property of 'ion-multi-picker'.

1. If 'ion-multi-picker' is an Angular component and it has 'multiPickerColumns' input, then verify that it is part of this module.

2. If 'ion-multi-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

为啥就报错了咩...明明什么都没有错...

最终我在这个 Issue 中找到了解决方案。

因为我的这个页面是子页面，所以也要将 MultiPickerModule 导入子module一下。如果是根页面的话就没有问题。

edit.module.ts:

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { EditPage } from './edit';

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

@NgModule({

  declarations: [

    EditPage,

  ],

  imports: [

    MultiPickerModule,

    IonicPageModule.forChild(EditPage),

  ],

})

export class EditPageModule {}

6. 更多

GitHub - ion-multi-picker

7. 效果图

iOS:

Android:

如有不当之处，请予指正，谢谢～