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

目录

  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:

如有不当之处,请予指正,谢谢~

Ionic3学习笔记(十一)实现省市区三级联动的更多相关文章

  1. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  2. 省市区三级联动(二)JS部分简单版

    通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...

  3. 省市区三级联动——思路、demo、示例

    说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...

  4. 【转】纯JS省市区三级联动(行政区划代码更新至2015-9-30)

    本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...

  5. 原生javascript制作省市区三级联动详细教程

    多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...

  6. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  7. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  8. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  9. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  10. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

随机推荐

  1. 如何结合场景利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...

  2. 2017-03-02学习心得之Java代码

    package com.lovo.classes;import java.util.Random;import java.util.TreeSet;import java.util.Scanner;p ...

  3. 如何从MVP模式进阶到Clean模式

    从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...

  4. Spring 源码剖析IOC容器(一)概览

    目录 一.容器概述 二.核心类源码解读 三.模拟容器获取Bean ======================= 一.容器概述 spring IOC控制反转,又称为DI依赖注入:大体是先初始化bean ...

  5. win10 UWP 显示地图

    微软自带的地图很简单 引用地图xmlns:Map="using:Windows.UI.Xaml.Controls.Maps" 写在<Page> 然后在Grid 用Map ...

  6. C#同步方法转异步

    public async Task DelayAsync() { await Task.Run(()=>Delay()); } private void Delay() { } 本作品采用知识共 ...

  7. ubuntu tftp-server 服务器安装与配置

    第一步:安装tftp服务sudo apt-get install tftpd tftp openbsd-inetd第二步:目录配置vi /etc/inetd.conf修改文件夹为根目录下的tftpbo ...

  8. JS中最经典的全局变量和局部变量问题

    话不多说,直接上例子: 1.程序的运行结果为:100  10  100 var a = 10; function test(){ a = 100; console.log(a); console.lo ...

  9. 【转】浅谈UML的概念和模型之UML九种图

    原文地址:浅谈UML的概念和模型之UML九种图 目录: UML的视图 UML的九种图 UML中类间的关系 上文我们介绍了,UML的视图,在每一种视图中都包含一个或多种图.本文我们重点讲解UML每种图的 ...

  10. 【前端】windows64位必备软件清单

    目录 一.前言 二.日常必备 三.前端相关 四.个人习惯 一.前言 重做系统以后,安装各种软件就是挺烦人的一件事. 特地整理成文章,并且将相关软件上传到了百度网盘,省的以后再各种找资源了. 百度网盘下 ...