Three level linkage of ionic3


  1. Install ion multi picker
  2. Import app.module.ts
  3. Create provider
  4. Create page
  5. A pit
  6. More
  7. Design sketch

1. Install ion multi picker

Terminal operation:

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

2. Import app.module.ts

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

  imports: [

3. Create a provider

Terminal operation:

ionic g provider city-data

Download address of json file in provincial and urban areas:

Just assign the json value to the following cities variable.


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

export class CityDataProvider {

  cities: any[];

  constructor() {
    this.cities = Above json(I won't copy and paste it if it's too long.)


4. Create page

Terminal operation:

ionic g page edit




    <ion-buttons end>
      <button ion-button>Preservation</button>


      <ion-icon name="pin" item-start></ion-icon>
      <ion-label>Place of residence</ion-label>
      <ion-multi-picker item-content [multiPickerColumns]="cityColumns" [cancelText]="'cancel'" [doneText]="'complete'"></ion-multi-picker>


import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';

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

  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. a pit

The error is as follows:

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.

Why did you report something wrong

I ended up here Issue Solution found in.

Because my page is a sub page, I also need to import the multi pickermodule into the sub module. If it's the root page, there's no problem.


import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { EditPage } from './edit';

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

  declarations: [
  imports: [
export class EditPageModule {}

6. more

GitHub - ion-multi-picker

7. effect picture



If there is anything wrong, please correct it. Thank you


Tags: angular JSON npm github

Posted on Wed, 18 Mar 2020 08:21:48 -0700 by h.a.visser