离子选择器选项重叠

Question

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

我按照自己的意愿完美地获得了数据，但只有一次意味着当我第一次打开选择器时，但是当我第二次点击所有选项时，由于stackoverflow（10信誉）政策，我无法上传图片. 所以请参考这里的例子 ，我也selectedIndex: 0按照 GitHub 链接中的建议进行了尝试，但没有任何变化。如果有人知道如何解决这个问题，请告诉我。

提前致谢

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

Answer 1

首先，我发现问题在于您将选项与数组一起放置，我的意思是您没有手动放置它们。

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

第一个是手动放置选项（在我看来不值得），第二个，我发现如果你selectedIndex: 0在列属性上放置，重叠应该消失，但选择器将始终在第一个条目上打开. 如果您覆盖 this 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）并删除此属性，则选择器数据应该可以正常工作