本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)標(biāo)明出處

目錄

1. 安裝 ion-multi-picker
2. 導(dǎo)入 app.module.ts
3. 創(chuàng)建 provider
4. ?創(chuàng)建 page
5. 一個(gè)坑
6. 更多
7. 效果圖

1. 安裝 ion-multi-picker

終端運(yùn)行:

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

2. 導(dǎo)入 app.module.ts

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

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

3. 創(chuàng)建 provider

終端運(yùn)行:

ionic g provider city-data

省市區(qū)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（太長(zhǎng)我就不復(fù)制粘貼了）
  }

}

4. ?創(chuàng)建 page

終端運(yùn)行:

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. 一個(gè)坑

錯(cuò)誤如下:

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.

為啥就報(bào)錯(cuò)了咩...明明什么都沒(méi)有錯(cuò)...

最終我在這個(gè) Issue 中找到了解決方案阎肝。

因?yàn)槲业倪@個(gè)頁(yè)面是子頁(yè)面，所以也要將 MultiPickerModule 導(dǎo)入子module一下肮街。如果是根頁(yè)面的話(huà)就沒(méi)有問(wèn)題风题。

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:

iOS

Android:

Android

如有不當(dāng)之處，請(qǐng)予指正嫉父，謝謝～