Question

我似乎无法从离子选择器中获得按钮的作用。我需要知道它是“完成”还是“取消”。
任何想法为什么会这样？

我只是补充一下，因为stackoverflow要求我写一些更多的细节，因为我的帖子主要是代码。

他们的数据只是返回如下：

{data: undefined, role: undefined}


let opts: PickerOptions = {
      cssClass: 'time-picker',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Done',
          role: 'done'
        }
      ],
      columns: [
        {
          name: 'hour',
          options: [
            { text: '01', value: '01' },
            { text: '02', value: '02' },
            { text: '03', value: '03' },
            { text: '04', value: '04' },
            { text: '05', value: '05' },
            { text: '06', value: '06' },
            { text: '07', value: '07' },
            { text: '08', value: '08' },
            { text: '09', value: '09' },
            { text: '10', value: '10' },
            { text: '11', value: '11' },
            { text: '12', value: '12' },
            { text: '13', value: '13' },
            { text: '14', value: '14' },
            { text: '15', value: '15' },
            { text: '16', value: '16' },
            { text: '17', value: '17' },
            { text: '18', value: '18' },
            { text: '19', value: '19' },
            { text: '20', value: '20' },
            { text: '21', value: '21' },
            { text: '22', value: '22' },
            { text: '23', value: '23' },
            { text: '24', value: '24' }
          ]
        },
        {
          name: 'minute',
          options: [
            { text: '00', value: '00' },
            { text: '15', value: '15' },
            { text: '30', value: '30' },
            { text: '45', value: '45' }
          ]
        }
      ]
    };

const picker = await this.pickerCtrl.create(opts);
    picker.present();
    picker.onDidDismiss().then(async data => {
      console.log(data);
      const hour = await picker.getColumn('hour');
      const minute = await picker.getColumn('minute');
      this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
      this.isPickerOpen = false;
    });

Answer 1

let pickerAction;

const opts: PickerOptions = {
      cssClass: 'time-picker',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: value => {
            pickerAction = 'cancel';
          }
        },
        {
          text: 'Done',
          role: 'done',
          handler: value => {
            pickerAction = 'done';
          }
        }
      ],
      columns: [
...
 const picker = await this.pickerCtrl.create(opts);
    picker.present();
    picker.onDidDismiss().then(async data => {
      if (pickerAction === 'done') {
        const hour = await picker.getColumn('hour');
        const minute = await picker.getColumn('minute');
        this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
      }
      this.isPickerOpen = false;
    });

Answer 2

您需要将逻辑从触发onDidDismiss（）事件（这意味着弹出窗口已消失，而不管其采取了什么操作）转变为单击“完成”按钮的实际操作。这是“完成”上的处理程序在这里所做的事情，告诉您由于单击“完成”按钮而导致弹出窗口消失时，在引用列中设置所选条目的值。

    {data: undefined, role: undefined}


let opts: PickerOptions = {
      cssClass: 'time-picker',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Done',
          handler: () => {
      picker.dismiss().then(async data => {
      console.log(data);
      const hour = await picker.getColumn('hour');
      const minute = await picker.getColumn('minute');
      this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
      this.isPickerOpen = false;
    });
 }
        }
      ],
      columns: [
        {
          name: 'hour',
          options: [
            { text: '01', value: '01' },
            { text: '02', value: '02' },
            { text: '03', value: '03' },
            { text: '04', value: '04' },
            { text: '05', value: '05' },
            { text: '06', value: '06' },
            { text: '07', value: '07' },
            { text: '08', value: '08' },
            { text: '09', value: '09' },
            { text: '10', value: '10' },
            { text: '11', value: '11' },
            { text: '12', value: '12' },
            { text: '13', value: '13' },
            { text: '14', value: '14' },
            { text: '15', value: '15' },
            { text: '16', value: '16' },
            { text: '17', value: '17' },
            { text: '18', value: '18' },
            { text: '19', value: '19' },
            { text: '20', value: '20' },
            { text: '21', value: '21' },
            { text: '22', value: '22' },
            { text: '23', value: '23' },
            { text: '24', value: '24' }
          ]
        },
        {
          name: 'minute',
          options: [
            { text: '00', value: '00' },
            { text: '15', value: '15' },
            { text: '30', value: '30' },
            { text: '45', value: '45' }
          ]
        }
      ]
    };

const picker = await this.pickerCtrl.create(opts);
    picker.present();

离子选择器无法获得单击按钮的作用

2 个答案: