简体   繁体   English

Ionic v4.12 ion-picker 找不到任何方法来处理某列的项目选择更改

[英]Ionic v4.12 ion-picker can not find any way to handle item selected change of a column

I user ion-picker component with ionic V4.12, and I have 3 columns.我在 ionic V4.12 中使用 ion-picker 组件,我有 3 列。 When I select one item of the first column, I need to filter items of the second column, but I cannot find any way to resolve my problem当我选择第一列的一个项目时,我需要过滤第二列的项目,但我找不到任何方法来解决我的问题

I found PickerColumn has refresh function ,but still not work我发现 PickerColumn 有刷新功能,但还是不行

import { PickerController } from '@ionic/angular';

@Component({
  ...
})
export class ComponentPage {
  constructor(public pickerCtrl: PickerController) { }

  async openPicker() {
    const picker = await this.pickerCtrl.create({
      buttons: [{
        text: 'Done',
      }],
      columns: [
        {
          name: 'days',
          options: [
            {
              text: '1',
              value: 1
            },
            {
              text: '2',
              value: 2
            },
            {
              text: '3',
              value: 3
            },
          ]
        },
        {
          name: 'years',
          options: [
            {
              text: '1992',
              value: 1992
            },
            {
              text: '1993',
              value: 1993
            },
            {
              text: '1994',
              value: 1994
            },
          ]
        },
      ]
    });
    await picker.present();
  }
}

When I select 1 on days column, I just want to show the item named 1994.当我在 days 列中选择 1 时,我只想显示名为 1994 的项目。

I put a request to IONIC TEAM,and the answer is listen ionPickerColChange Even我向 IONIC TEAM 提出请求,答案是听 ionPickerColChange Even

picker.addEventListener('ionPickerColChange', async (event: any) => {
     here handle some logic
} 

You can listen to the onDidDismiss method like so:您可以像这样收听 onDidDismiss 方法:

async openPicker() {
    const picker = await this.pickerCtrl.create({
      buttons: [{
        text: 'Done',
      }],
      columns: [
        {
          name: 'days',
          options: [
            {
              text: '1',
              value: 1
            },
            {
              text: '2',
              value: 2
            },
            {
              text: '3',
              value: 3
            },
          ]
        },
        {
          name: 'years',
          options: [
            {
              text: '1992',
              value: 1992
            },
            {
              text: '1993',
              value: 1993
            },
            {
              text: '1994',
              value: 1994
            },
          ]
        },
      ]
    });

    picker.onDidDismiss().then(({data}) => console.log(data.years.value));

    await picker.present();
  }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM