typescript - Ionic v4.12 ion-picker kan inte hitta något sätt att hantera ändring av valt objekt i en kolumn


Jag använder ion-picker-komponenten med Ionic V4.12, och jag har 3 kolumner. När jag väljer ett objekt i den första kolumnen behöver jag filtrera objekt i den andra kolumnen, men jag kan inte hitta något sätt att lösa mitt problem

Jag upptäckte att PickerColumn har en uppdateringsfunktion, men den fungerar fortfarande inte

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();
  }
}

När jag väljer 1 i kolumnen dagar vill jag bara visa objektet som heter 1994.

Svar #1

Jag skickade en förfrågan till IONIC TEAM, och svaret är lyssna på ionPickerColChange Even

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

Svar #2

Du kan lyssna på onDidDismiss-metoden så här:

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();
  }

Relaterade artiklar