时间戳

首页 > 解决方案 > 如果尚未确认，我如何知道当前在多列离子选择器的列中选择了哪些元素？

ionic4 - 如果尚未确认，我如何知道当前在多列离子选择器的列中选择了哪些元素？

问题描述

问题是，我做了一个有 2 列的离子选择器。在第一列中只有 2 个选项可供选择，根据该列中当前选择的内容，第二列的值应该会改变。所以我的问题是，如果我无法确认，如何找出第一列中当前选择的内容？

第二列应该从一个包含值的数组中获取它的信息。请不要因为下面代码中的变量名而批评我，我稍后可能会更改它们。

async showMultiColumnPicker(id) {
    if (this.disabledis[id - 6] !== true) {
    const opts: PickerOptions = {
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Done',
          role: 'confirm',
          handler: async () => {
            const vari1 = await      
                  this.picker_cancer.getColumn(this.pickerbois[id].name);
            const vari2 = await this.picker_cancer.getColumn('2nd row');
            this.selectedvalue = vari1.options[vari1.selectedIndex].text +
            ' ' + vari2.options[vari2.selectedIndex].text;
            this.selected[id] = this.selectedvalue;
          }
        }
      ],
      columns: [
        {     //1st row
          name: this.pickerbois[id].name,
          options:  this.pickerbois[id].options[0]
        },
        {     // How can you know which option is 
              // currently selected in the first column?
          name: '2nd row',
          options: this.pickerbois[id].options[1]
        //options: this.pickerbois[id].options[2] in case of the second          
        //attribute in the 1st row being selected
        }
      ]
    };
    const picker = await this.pickerCtrl.create(opts);
    this.picker_cancer = picker;
    picker.present();
  }
 }

标签： ionic4

解决方案

好的，所以我认为日期时间选择器是在一个月中的几天内完成的，所以它一定是可能的。

深入研究代码是回答您的问题的好方法，在 datetime.tsx文件中我发现了这一点：

picker.addEventListener('ionPickerColChange', async (event: any) => {
  const data = event.detail;

  const colSelectedIndex = data.selectedIndex;
  const colOptions = data.options;

  const changeData: any = {};
  changeData[data.name] = {
    value: colOptions[colSelectedIndex].value
  };

  this.updateDatetimeValue(changeData);
  picker.columns = this.generateColumns();
});

您可以处理的绝密事件可以解决您的问题！

我认为这是文档中的一个错误，但似乎通过更多地挖掘这些新信息，ionPickerColChange标记为@internal。

这意味着它可能会在未来发生变化，并且不受官方支持。

似乎在某些情况下可能存在一些显示问题，可能会阻止他们制作这部分公共 api，所以看看你的进展情况，祝你好运！

我在研究过程中注意到的最后一件事是，这个论坛帖子最后有一个forceUpdate电话：

picker.forceUpdate();

如果你有麻烦，试试吧。

推荐阅读