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

目录

  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. es6的箭头函数

    1.使用语法 : 参数 => 函数语句; 分为以下几种形式 : (1) ()=>语句 (  )=> statement 这是一种简写方法省略了花括号和return 相当于 ()=&g ...

  2. SAP GB01替代 程序:RGUGBR00

    TCODE: SM30 VIEW : VWTYGB01 GB01 更新后需要执行 RGUGBR00

  3. GeoServer+PostgreSQL+PostGIS+pgRouting实现最短路径查询

    一.软件安装 GeoServer下载地址: http://geoserver.org/download/ PostgreSQL下载地址: https://www.postgresql.org/down ...

  4. C# 复制列表

    本文:如何复制一个列表 最简单的方法是 foreach foreach(var temp in a) { b.Add(temp); } 有没一个简单的方法? using System.Linq; va ...

  5. uva10003 - Cutting Sticks(简单动规)

    /* * Author: Bingo * Created Time: 2015/2/13 18:33:03 * File Name: uva10003.cpp */ #include <iost ...

  6. http服务详解(2)——httpd2.2的配置文件常见设置

    摘要:一个服务的配置文件非常重要,弄懂配置文件是熟练掌握服务的必要前提. 一.httpd-2.2常见文件介绍 (1)配置文件: 主配置文件尽量别改,改自己的子配置文件 /etc/httpd/conf/ ...

  7. CentOS 升级 Python3 (附带: 一键升级脚本)

      升级环境   应用名称 版本 Python 3.5.2 Syatem CentOS 6.7         升级方法   [1]下载 Python 3: wget http://mirrors.s ...

  8. 开源纯C#工控网关+组态软件(四)上下位机通讯原理

    一.   网关的功能:承上启下 最近有点忙,更新慢了.感谢园友们给予的支持,现在github上已经有.目标是最好的开源组态,看来又近一步^^ 之前有提到网关是物联网的关键环节,它的作用就是承上启下. ...

  9. MySql数据库的基本原理及指令

    1.什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以通过SQL对数据库中的数据进行增加,修改,删除及查询操作. 2.简介 MySQL是一个开放源 ...

  10. 在 ASP.NET Core 中使用 SignalR

    https://weblogs.asp.net/ricardoperes/signalr-in-asp-net-core 作者:Ricardo Peres 译者:oopsguy.com 介绍 Sign ...