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 ...
随机推荐
- 如何结合场景利用block进行回调
我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...
- 2017-03-02学习心得之Java代码
package com.lovo.classes;import java.util.Random;import java.util.TreeSet;import java.util.Scanner;p ...
- 如何从MVP模式进阶到Clean模式
从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...
- Spring 源码剖析IOC容器(一)概览
目录 一.容器概述 二.核心类源码解读 三.模拟容器获取Bean ======================= 一.容器概述 spring IOC控制反转,又称为DI依赖注入:大体是先初始化bean ...
- win10 UWP 显示地图
微软自带的地图很简单 引用地图xmlns:Map="using:Windows.UI.Xaml.Controls.Maps" 写在<Page> 然后在Grid 用Map ...
- C#同步方法转异步
public async Task DelayAsync() { await Task.Run(()=>Delay()); } private void Delay() { } 本作品采用知识共 ...
- ubuntu tftp-server 服务器安装与配置
第一步:安装tftp服务sudo apt-get install tftpd tftp openbsd-inetd第二步:目录配置vi /etc/inetd.conf修改文件夹为根目录下的tftpbo ...
- JS中最经典的全局变量和局部变量问题
话不多说,直接上例子: 1.程序的运行结果为:100 10 100 var a = 10; function test(){ a = 100; console.log(a); console.lo ...
- 【转】浅谈UML的概念和模型之UML九种图
原文地址:浅谈UML的概念和模型之UML九种图 目录: UML的视图 UML的九种图 UML中类间的关系 上文我们介绍了,UML的视图,在每一种视图中都包含一个或多种图.本文我们重点讲解UML每种图的 ...
- 【前端】windows64位必备软件清单
目录 一.前言 二.日常必备 三.前端相关 四.个人习惯 一.前言 重做系统以后,安装各种软件就是挺烦人的一件事. 特地整理成文章,并且将相关软件上传到了百度网盘,省的以后再各种找资源了. 百度网盘下 ...