关于Typescript：Ionic v4.12 ion-picker无法找到任何方法来处理选定的列更改


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

我将离子选择器组件与离子V4.12一起使用，我有3列。 当我选择第一列中的一项时，我需要过滤第二列中的项，但是我找不到任何解决问题的方法

我发现PickerColumn具有刷新功能，但仍然无法正常工作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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();
  }
}

当我在天数列中选择1时，我只想显示名为1994的项目。

相关讨论

我向IONIC TEAM提出了一个请求，答案是收听ionPickerColChange Even

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

您可以像这样监听onDidDismiss方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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();
  }