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 } ] } ]; } }