Ionic framework 离子选择器可以';无法获取已单击按钮的角色

Ionic framework 离子选择器可以';无法获取已单击按钮的角色,ionic-framework,Ionic Framework,我似乎无法从离子选择器中获得按钮角色。 我需要知道是“完成”还是“取消”。 你知道为什么吗 我只是补充一下,因为stackoverflow要求我写更多的细节,因为我的文章主要是代码 他们的数据如下所示: {data: undefined, role: undefined} let opts: PickerOptions = { cssClass: 'time-picker', buttons: [ { text: 'Cancel',

我似乎无法从离子选择器中获得按钮角色。 我需要知道是“完成”还是“取消”。
你知道为什么吗

我只是补充一下,因为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;
    });

您需要将逻辑从触发OnDidDisclesh()事件(这意味着popover已消失,而不管是什么操作使其消失)移动到单击“完成”按钮的实际操作。 这就是处理程序在此处所做的,告诉您在单击“完成”按钮后弹出窗口关闭时,在引用列中设置所选条目的值

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

你能用文本记录对代码所做的更改吗?希望@probitaille更好
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;
    });