Question

当前，我正在开发需要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
    });

Answer 1

首先，我发现问题在于您将选项放置在一个数组中，这意味着您没有手动放置它们。

那么我认为您有2个选择：

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

离子选择器选项重叠

1 个答案: