欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【Ionic3】ion-multi-picker placeholder

程序员文章站 2022-06-01 11:03:02
...

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.

【Ionic3】ion-multi-picker placeholder



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.