Ionic3学习笔记(十一)实现省市区三级联动
来源:互联网 发布:汽车行业设计软件 编辑:程序博客网 时间:2024/05/16 17:52
本文为原创文章,转载请标明出处
目录
- 安装
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. 更多
GitHub - ion-multi-picker
7. 效果图
iOS:
Android:
如有不当之处,请予指正,谢谢~
阅读全文
1 0
- Ionic3学习笔记(十一)实现省市区三级联动
- 实现省市区三级联动
- 三级联动(省市区)
- js实现省市区三级联动
- js实现省市区三级联动
- javaScript实现省市区三级联动
- jquery实现省市区三级联动
- RecyclerView 实现省市区三级联动
- 省市区 三级联动 js 实现
- 省市区三级联动实现1
- 省市区三级联动实现2
- js实现省市区三级联动
- android省市区三级联动实现
- vue 实现省市区三级联动
- JS实现省市区三级联动
- 安卓学习笔记---Android-PickerView实现 3D滚轮效果(时间选择器、省市区三级联动,单项选择效果)
- 省市区三级联动(新)
- 省市区三级联动(模板)
- 九九乘法口诀
- Tensorflow入门例子(1)
- HTML 事件属性
- 【原创】启发式查询
- solrJ使用
- Ionic3学习笔记(十一)实现省市区三级联动
- mysql常用操作:插入操作;表、列操作;主键外键操作
- ubuntu16.04安装nvidia驱动+cuda8.0+cuDnn5.0
- HTML 5 视频/音频参考手册
- pycharm安装vim插件
- React中Ajax异步解决小技巧
- 个人日记本在线时间显示
- Verilog HDL-2
- postgreSQL和orcale之间的语言区别