为什么我的Ionic选择菜单不起作用？

Question

我是Ionic的新手。我想设计一个汽车共享应用程序。我想制作一个“选择目的地”下拉菜单，其中包含频繁的选项（如“此处”，“主页”或“任意位置”）和特殊的“选择目的地”选项。

理想情况下，此选项看起来像另一个下拉菜单（带有小三角形），并打开一个带有输入的模态，允许选择一个地址（我还没有，我将不得不与谷歌地图或OSM接口..无论如何）。

我尝试了以下代码

    <ion-card>
    <ion-card-header>
        Where are you going?    
    </ion-card-header>
    <ion-card-content>
        <ion-item>
            <ion-label>Destination</ion-label>
            <ion-select [(ngModel)]="destination">
                <ion-option>Here</ion-option>
                <ion-option>Home</ion-option>
                <ion-option>Work</ion-option>
                <ion-option>
                    <ion-item>
                        <ion-label fixed>Choose a destination</ion-label>
                        <ion-select [(ngModel)]="destination_chosen">
                        </ion-select> 
                    </ion-item>
                </ion-option>
                <ion-option>Anywhere</ion-option>
            </ion-select>   
        </ion-item>
    </ion-card-content>
</ion-card>

但看起来它没有被考虑在内。我做错了什么？它甚至可能吗？如果没有，在这种情况下，是否有人会想到一个好的用户体验模式？

Answer 1

一个简单的解决方案是更改模态的视图，以显示您希望选择该选项的实际下拉菜单，就像它是第二步一样。第二种不同的模态并不理想，因为将模态置于另一种模态中并不是一种良好的用户体验。因为它是各个步骤过程的一部分，所以不会感到奇怪。

因此，您不必成为同一视图的一部分，而是必须创建第二个，使用JS应该足够简单，或者使用Angular更容易。一个简单的ng-show条件应该这样做。