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里加入

Period Type{{ period }}
  

ok..试一下吧 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！