ionic4|5 使用PickerController 组件

效果图

Step 1 要使用的ts文件代码

import { Component, OnInit } from '@angular/core';
import { NavController, PickerController } from '@ionic/angular';
import { PickerOptions } from '@ionic/core';


@Component({
  selector: 'app-searchcondition',
  templateUrl: './searchcondition.page.html',
  styleUrls: ['./searchcondition.page.scss'],
})
export class SearchconditionPage implements OnInit {
  public period = 'period';

  constructor(
    private navCtl: NavController,
    private pickCtl: PickerController,
  ) { }

  ngOnInit() {
  }

  public onDone() {
    this.navCtl.back();
  }

  public async pickPeriod() {
    const opts: PickerOptions = {
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Confirm',
          handler: (v) => {
              this.period = v['periodType'].value;
          }
        }
      ],
      columns: [
        {
          name: 'periodType',
          options: [
            {text: 'open', value: 'open'},
            {text: 'close', value: 'close'},
            {text: 'period', value: 'period'},
          ]
        }
      ]
    };
    const picker = await this.pickCtl.create(opts);
    picker.present();
  }

  public async pickShift() {
    
  }

}

Step 2 html里加入

<ion-item-group>
      <ion-item-divider class="itemg">
        <ion-label>Period Type</ion-label>
      </ion-item-divider>
      <ion-item class="dateLabel" (click)="pickPeriod()" detail>
        <ion-label>{{ period }}</ion-label>
      </ion-item>
</ion-item-group>  

ok..试一下吧