离子选择器选项重叠答案

【问题标题】：ion picker options overlaps离子选择器选项重叠
【发布时间】：2019-06-12 06:04:52
【问题描述】：

目前，我正在开发一个需要ion-picker（多列选择器）的离子应用程序。

我完全按照我的意愿获得了数据，但只有一次意味着当我第一次打开选择器时，但之后当我第二次单击所有选项重叠时，由于 stackoverflow（10声誉）政策。所以请参考示例here ，我也按照GitHub链接中的建议尝试了selectedIndex: 0，但没有任何变化。如果有人知道如何解决这个问题，请告诉我。

提前致谢

var myColumns = [
        {
            name: "days",
            options: this.day2,
            selectedIndex: 1
        },
        {
            name: "Hours",
            options: this.hours2,
            selectedIndex: 1
        },
        {
            name: "Minutes",
            options: this.minutes2,
            selectedIndex: 1
        },
        {
            name: "dayType",
            options: this.HourType,
            selectedIndex: 1
        }
    ];
    const picker = await this.pickerCtrl.create({
        buttons: [
            {
                text: "Done"
            },
            { text: "Cancel" }
        ],
        mode: "md",
        cssClass: ["datePicker"],
        columns: myColumns
    });

【问题讨论】：

您能否添加一些与 ion-picker 相关的代码，以便我们根据您的代码了解问题所在？
我已经更新了问题，请看一下。

标签： ionic-framework ionic4 picker

【解决方案1】：

首先，我发现问题是你把选项放在一个数组里，我的意思是你不要手动放。

那么我认为你有两个选择：

第一个是手动放置选项（我认为不值得），第二个，我发现如果你把selectedIndex: 0, 放在列属性上，重叠应该消失了，但是选择器会总是在第一个条目时打开。如果您覆盖此selectedIndex: 0，并放置一个您可以随时更改的变量，那么对于大多数条目，除了第一个和最后一个条目之外，重叠应该消失。我就是这么想的。

希望对您有所帮助。

编辑：

我环顾四周，发现了这个：

let picker = await this.pickerCtrl.create(opts);

    picker.present();
    picker.onDidDismiss().then(async data => {
      let num = await picker.getColumn('num');
this.pickerData = num.options[num.selectedIndex].text;
        this.pickerDataPrevious = num.selectedIndex;   


num.options.forEach(element => {
            delete element.selected;
            delete element.duration;
            delete element.transform;
            });
        });

如果您循环选项（在这种情况下为 num.options）并删除此属性，则选择器数据应该可以正常工作

【讨论】：

【解决方案2】：

就在picker.present();之前

添加这些行：

    picker.columns[0].options.forEach(element => {
      delete element.selected;
      delete element.duration;
      delete element.transform;
    });

参考：https://github.com/ionic-team/ionic-framework/issues/17664

【讨论】：

【解决方案3】：

是的，这是一个已知的issue
问题是原始列的 options 对象中添加了 2 个属性：duration & transform

作为一种解决方法，您可以手动删除这 2 个属性。这是一个干净的方法。

onShowOptions(): void {
    const selectedIndex = this.findOptionIndex(this.defaultLanguage, this.languagesList);
    this.pickerController
      .create({
        columns: [
          {
            selectedIndex: selectedIndex,
            name: 'item',
            // here's where the magic happens: spread the object, remove duration & transform properties and keep the rest
            options: this.options.map(({ duration, transform, ...rest }) => rest),
          },
        ],
        buttons: [
          {
            text: 'Cancel',
          },
          {
            text: 'Done',
            handler: ({ item }) => this.optionSelected(item),
          },
        ],
      })
      .then((picker: HTMLIonPickerElement) => picker.present());
  }

【讨论】：