ion-picker组件示例（ionic4）

Posted 2021-03-02 johnjackson

Ionic4的官方文档中关于ion-picker组件没有给出相应的示例代码，但是其右上角效果展示的地方下边有一个github的示例代码连接，这个代码不是标准的ionic项目结构，但使用原理是一样的，这里我修改成ionic项目的写法：

html:

<ion-button expand="block" (click)="openPicker()">点击</ion-button>

javascript:

import { Component, OnInit } from ‘@angular/core‘;
import { PickerController } from ‘@ionic/angular‘;

@Component({
  selector: ‘app-edit‘,
  templateUrl: ‘./edit.page.html‘,
  styleUrls: [‘./edit.page.scss‘],
})
export class EditPage implements OnInit {

  constructor(private pickerController: PickerController) { }

  ngOnInit() {
  }

  public async openPicker() {
    const picker = await this.pickerController.create({
      columns: this.getColumns(),
      buttons: [
        {
          text: ‘取消‘,
          role: ‘cancel‘
        },
        {
          text: ‘确定‘,
          handler: (value) => {
            console.log(`${value[‘col-0‘].text}`);
          }
        }
      ]
    });

    await picker.present();
  }

  private getColumns() {
    // ion-pick 有个问题，create方法接收的参数中columns 不能直接给对象字面量，必须每次调用create时动态创建一个新对象，即时将这个对象保存为组件对象的属性xxx，这里通过return this.xxx，这样的方式也不行，会导致第二次打开时样式不正常。
    return [
      {
        name: ‘col-0‘,
        options: [
          {
            text: "选项1",
            value: 0
          },
          {
            text: "选项2",
            value: 1
          },
          {
            text: "选项3",
            value: 2
          }
        ]
      }
    ];
  }
}