【Ionic3】ion-multi-picker placeholder

最新推荐文章于 2022-11-15 09:13:01 发布

芝麻开花不开门

最新推荐文章于 2022-11-15 09:13:01 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ionic 文章标签： ion-multi-picker placeholde Ionic3

本文链接：https://blog.youkuaiyun.com/Luyanc/article/details/80557288

Ionic 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Ionic框架中使用ion-multi-picker组件，并设置其默认值及更改按钮文本为中文的方法。通过定义高度选择选项并利用placeholder属性，实现显示默认值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>