ionic中ion-multi-picker报错Cannot find module 'ion-multi-picker'.以及ion-multi-picker用法
来源:互联网 发布:办公文件整理软件 编辑:程序博客网 时间:2024/06/05 03:36
解决办法:
在引用方法没有错误的情况下:
原因是没有安装:
ion-multi-picker
只要安装即可:npm install ion-multi-picker --save
正确的使用方法:
使用前先安装它
npm install ion-multi-picker --save
1.将MultiPickerModule导入到您的应用/模块。注意:此处是用懒加载的页面来示例,故module的样子看起来不太一样但是导入方式是一样的
import { NgModule } from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { HomePage } from './home';import { MultiPickerModule } from 'ion-multi-picker';@NgModule({ declarations: [HomePage], imports: [IonicPageModule.forChild(HomePage),MultiPickerModule], exports: [HomePage]})export class HomePageModule { }
2.2.在控制器中初始化选择器列。picker columns
import { Component } from '@angular/core';import { NavController } from 'ionic-angular';import { IonicPage } from 'ionic-angular';@IonicPage()@Component({ selector: 'page-home', templateUrl: 'home.html'})export class HomePage { public simpleColumns: any[];//先定义一个任意类型的数组来接收参数 constructor(public navCtrl: NavController) { this.simpleColumns = [ { name: 'col1',//列名,一个对象表示一列多选,一个multipicker有几列选项就有几个对象 options: [ //每一列的选项集 { text: '选项1', value: '选项1' }, { text: '选项2', value: '选项2' }, { text: '选项3', value: '选项3' } ] },{ name: 'col2', options: [ { text: '1-1', value: '1-1' }, { text: '1-2', value: '1-2' }, { text: '2-1', value: '2-1' }, { text: '2-2', value: '2-2' }, { text: '3-1', value: '3-1' } ] },{ name: 'col3', options: [ { text: '1-1-1', value: '1-1-1' }, { text: '1-1-2', value: '1-1-2' }, { text: '1-2-1', value: '1-2-1' }, { text: '1-2-2', value: '1-2-2' }, { text: '2-1-1', value: '2-1-1' }, { text: '2-1-2', value: '2-1-2' }, { text: '2-2-1', value: '2-2-1' }, { text: '2-2-2', value: '2-2-2' }, { text: '3-1-1', value: '3-1-1' }, { text: '3-1-2', value: '3-1-2' } ] } ]; }}
3.添加ion-multi-picker到您的html template。
<ion-item> <ion-label>简单多选</ion-label> <ion-multi-picker item-content [multiPickerColumns]="simpleColumns"></ion-multi-picker></ion-item>注意:不要忘了item-content属性
效果:
阅读全文
0 0
- ionic中ion-multi-picker报错Cannot find module 'ion-multi-picker'.以及ion-multi-picker用法
- ion-multi-picker placeholder默认值
- ion
- ion
- ION
- Picker
- ionic2中ion-segment用法
- ionic <ion-content>标签
- ionic 隐藏ion-tab
- 【Ionic】 <ion-navbar>标签的用法;
- Picker(Time picker&& Date picker)
- Ionic基础——表单输入ion-checkbox ion-radio ion-toggle ion-spinner
- ion-item用法收集
- Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解
- (补充)第十六讲 ionic ion-tap 选项卡以及 路由结合 ion-tap 详解
- ionic ion-refresher刷新完毕
- ION-中传
- Ionic ion-refresher ion-infinite-scroll 自定义loading动画
- Keras + TensorFlow
- 数位dp hdu2089 ,4734,bzoj 1026
- 博客分类暗语
- 理解mysql_如何优雅的设计表结构
- 《Python自然语言处理》学习笔记-第一章
- ionic中ion-multi-picker报错Cannot find module 'ion-multi-picker'.以及ion-multi-picker用法
- H5游戏的日渐壮大
- STM32之GPIO的8种配置模式
- 文件权限的修改
- HDU1017
- C/C++ linux下光标定位和清屏函数(printf 实现)
- 纳什均衡复杂度
- 计算机导论-计算机,计算及计算思维
- SpringMVC与底层数据库的交互