Ionic3学习笔记(十一)实现省市区三级联动
本文为原创文章,转载请标明出处
目录
- 安装
ion-multi-picker
- 导入
app.module.ts
- 创建 provider
- 创建 page
- 一个坑
- 更多
- 效果图
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. 更多
7. 效果图
iOS:
Android:
如有不当之处,请予指正,谢谢~
Ionic3学习笔记(十一)实现省市区三级联动的更多相关文章
- ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...
- 省市区三级联动(二)JS部分简单版
通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...
- 省市区三级联动——思路、demo、示例
说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...
- 【转】纯JS省市区三级联动(行政区划代码更新至2015-9-30)
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
- 原生javascript制作省市区三级联动详细教程
多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- 省市区三级联动 pickerView
效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
随机推荐
- es6的箭头函数
1.使用语法 : 参数 => 函数语句; 分为以下几种形式 : (1) ()=>语句 ( )=> statement 这是一种简写方法省略了花括号和return 相当于 ()=&g ...
- SAP GB01替代 程序:RGUGBR00
TCODE: SM30 VIEW : VWTYGB01 GB01 更新后需要执行 RGUGBR00
- GeoServer+PostgreSQL+PostGIS+pgRouting实现最短路径查询
一.软件安装 GeoServer下载地址: http://geoserver.org/download/ PostgreSQL下载地址: https://www.postgresql.org/down ...
- C# 复制列表
本文:如何复制一个列表 最简单的方法是 foreach foreach(var temp in a) { b.Add(temp); } 有没一个简单的方法? using System.Linq; va ...
- uva10003 - Cutting Sticks(简单动规)
/* * Author: Bingo * Created Time: 2015/2/13 18:33:03 * File Name: uva10003.cpp */ #include <iost ...
- http服务详解(2)——httpd2.2的配置文件常见设置
摘要:一个服务的配置文件非常重要,弄懂配置文件是熟练掌握服务的必要前提. 一.httpd-2.2常见文件介绍 (1)配置文件: 主配置文件尽量别改,改自己的子配置文件 /etc/httpd/conf/ ...
- CentOS 升级 Python3 (附带: 一键升级脚本)
升级环境 应用名称 版本 Python 3.5.2 Syatem CentOS 6.7 升级方法 [1]下载 Python 3: wget http://mirrors.s ...
- 开源纯C#工控网关+组态软件(四)上下位机通讯原理
一. 网关的功能:承上启下 最近有点忙,更新慢了.感谢园友们给予的支持,现在github上已经有.目标是最好的开源组态,看来又近一步^^ 之前有提到网关是物联网的关键环节,它的作用就是承上启下. ...
- MySql数据库的基本原理及指令
1.什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以通过SQL对数据库中的数据进行增加,修改,删除及查询操作. 2.简介 MySQL是一个开放源 ...
- 在 ASP.NET Core 中使用 SignalR
https://weblogs.asp.net/ricardoperes/signalr-in-asp-net-core 作者:Ricardo Peres 译者:oopsguy.com 介绍 Sign ...