【Ionic3】ion-multi-picker placeholder

How to set ion-multi-picker's default value ? Using placeholder. Here is what I do.

html :

  <button ion-item>
    <ion-label>Height</ion-label>
    <ion-multi-picker class="userHeight" placeholder='{{defaultHeight}}' item-content [multiPickerColumns]="heightChoose" [showReset]="true"></ion-multi-picker>
  </button>

ts :

export class PersonalInfoPage {
  // Height：
  defaultHeight:string; //default value
  heightChoose:any[];  //users can choose from options
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.heightChoose = [
      {
        options: [
          { text: '100', value: '1' },
          { text: '101', value: '2' },
          { text: '102', value: '3' },
          { text: '103', value: '4' },
          { text: '104', value: '5' },
          { text: '105', value: '6' },
          { text: '106', value: '7' },
          { text: '107', value: '8' },
          { text: '108', value: '9' },
          { text: '109', value: '10' }],
      },
      {
        options: [{ text: 'cm', value: '1'}],
      }
    ];         
  }                                                                                                                         
  ionViewDidLoad() {
    console.log('ionViewDidLoad PersonalInfoPage');
    this.defaultHeight='160cm';
  }
}

Let's see the picture.

If you want to change "CANCEL" , " RESET" , " DONE" into Chinese , you can do in this way .

    <ion-multi-picker class="userHeight" placeholder='{{defaultHeight}}' item-content [cancelText]="'取消'" [doneText]="'完成'" [resetText]="'重置'" [multiPickerColumns]="heightChoose" [showReset]="true"></ion-multi-picker>

Thanks for your reading.

本文链接：https://blog.csdn.net/Luyanc/article/details/80557288

智能推荐

ionic3（二）登录页制作

原文出处：https://blog.csdn.net/pandade520/article/details/76422826 另外两篇更好的文章： 1. LocalStorage的使用—以登录和注销为例 (偏理论，必读） 2. LocalStorage的使用—以登录和注销为例（重实践）做一个登录页面: 1.修改 Ta...

ionic3遇到的坑

1、查看版本号 ionic -v 2、项目启动 ionic serve 3、手机访问本地项目 1）电脑下载个wifi精灵之类的软件装上，让手机连接这个wifi 下载地址 2）查看自己电脑的本地地址 &...

ionic3 添加loading效果

1、使用LoadingController类来编写服务，提供公共处理 2、模块调用...

ionic3启动白屏优化

1、在config.xml文件中修改配置 ShowSplashScreenSpinner——是否显示启动屏转圈圈那个 Spinner； AutoHideSplashScreen——是否自动隐藏SplashScreen； FadeSplashScreen——是否逐渐消失SplashScreen； SplashScreenBack...

ionic懒加载简介使用懒加载能够减少程序启动时间，减少打包后的体积。并且懒加载是当点击，触发的时候才去加载，所以程序启动的时间比较快。配置懒加载需要以下几个步骤： 1.给需要懒加载的页面配置module.ts； 2.在对应页面的.ts文件里增加@IonicPage()特性； 3.在app.module.ts移除页面引用； 4.使用懒加载（在调用这个界面的地方，不 import界面，使用 s...