Angular Ionic2 Ion选择而不确定并取消

我已经构建了一个Ionic2应用程序，目前正在尝试改进用户体验。为了做到这一点，我收到了一些反馈，这些反馈让我思考是否有一种方法可以让我拥有

    <ion-select>
      <ion-option>
      </ion-option>
    </ion-select>

点击后，会立即给我输出，而不是等待用户按下当前出现的“OK”和“CANCEL”按钮，ionic action sheet（）默认使用这些按钮

如有任何建议，将不胜感激！：）

编辑：

正如@sebaferreras所建议的

如果选项数超过6，即使通过了操作表，它也将使用警报界面。

---

因此，如果您需要使用6个以上的选项，您必须找到一个解决方法，因为目前，此功能未在Ionic2 docs下列出

更改选择元素中使用的API（通过使用）可能是一个选项

为此，您只需在

ion select

元素中添加

interface=“action sheet”

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select interface="action-sheet">
      <ion-option value="f" selected="true">Female</ion-option>
      <ion-option value="m">Male</ion-option>
    </ion-select>
  </ion-item>

性别
女性
男性

我不确定这在你的应用程序中是否是一个有效的选项（就用户体验而言）

---

编辑：

就像你可以在

如果选项数超过6，则将使用警报界面 即使行动表通过

---

我知道这个线程已经运行了7个月了，OP可能早就不是这个问题了，但是由于这个特性还没有添加到ionic框架中，我正在添加我提出的解决方法，以供其他人参考

CSS部分

直观地说，您需要做的第一件事是添加一些sass/css来隐藏不需要的按钮。为此，我为我的

ionselect

元素将css类“removeok”传递给

selectOptions

。（我只是删除OK按钮，但如果有人也需要删除cancel按钮，这是一个简单的css修改）

在组件中：

this.selectOptions = {
      cssClass: 'remove-ok'
    };

和HTML格式：

<ion-select [selectOptions]="selectOptions">

脚本部分

既然“确定”按钮已隐藏，您将需要以某种方式关闭警报视图

调用隐藏的OK按钮上的

click（）

事件非常简单直观，但您很快就会发现，尽管它在

ionic serve

上运行良好，但在实际的iOS设备上却无法运行

解决方案是找到对警报视图的引用，将选中的选项传递给选择处理程序，最后关闭该视图

因此，在组件类的

ngOnInit

中，您需要：

ngOnInit() {
        let root = this.viewController.instance.navCtrl._app._appRoot;
        document.addEventListener('click', function(event){
        let btn = <HTMLLIElement> document.querySelector('.remove-ok .alert-button-default:nth-child(2)');
        let target = <HTMLElement> event.target;
        if(btn && target.className == 'alert-radio-label')
        {
              let view = root._overlayPortal._views[0];
              let inputs = view.instance.d.inputs;
              for(let input of inputs) {
                if(input.checked) {
                  view.instance.d.buttons[1].handler([input.value]);
                  view.dismiss();
                  break;
                }
              }
            }
        });
    }

ngOnInit（）{
让root=this.viewController.instance.navCtrl.\u app.\u appRoot；
document.addEventListener（'click'，函数（事件）{
让btn=document.querySelector（'.remove确定。警报按钮默认值：第n个子项（2）'）；
让target=event.target；
如果（btn&&target.className=='alert radio label'）
{
let view=root.\u overlyportal.\u views[0]；
让输入=view.instance.d.inputs；
for（让输入为输入）{
如果（输入。选中）{
view.instance.d.buttons[1]。处理程序（[input.value]）；
view.discouse（）；
打破
}
}
}
});
}

同样，如果您想删除Cancel按钮，请注意此代码中的css引用

传递空值：

<ion-select okText="" cancelText="">
      <ion-option>
      </ion-option>
    </ion-select>

---

这对我的情况有效

在爱奥尼亚版本6.12.3中实现：

在HTML中创建

离子选择
。添加attibute
[interfaceOptions]=“randomOptions”
：

最后，在您的
global.scss
文件中，只需添加一个与您在TS中给出的名称完全相同的CSS类，然后只需添加类
。操作表组取消
，并显示一个
显示：无
：

.randomCSSClassName {
    .action-sheet-group-cancel {
        display: none;
    }
}

此实现在Web、iOS和Android上进行了测试。它工作得很好
我不确定我是否明白你的意思。添加操作表界面只给我们提供了四个选项，其中似乎没有一个与我的问题相关。谢谢你的回答！：-）@你说的“只给我们四个选择”是什么意思？请看一看。无论如何，如果选项不止几个，那么select组件仍然使用alertapi。我将在这个plunker中测试一些东西，如果我发现一些有帮助的东西，我将更新答案：）对不起，我的意思是ActionSheet接口似乎有4个方法，只能扩展。是的，这正是我想要的功能。您所说的“如果选项不止几个，选择组件仍然使用警报API”是什么意思？plunker中的示例有多个选项（可能确实使用了警报API），但缺少“确定”和“取消”按钮，并在鼠标单击时选择该选项。是的，但如果您仅向select元素添加另一个选项，则会显示警报。因此，如果这是您正在寻找的功能，我将进一步研究这个API可以使用的选项数量，并用这些信息编辑文章。哦，我明白了！如果我能找到一个解决方案，我现在就调查一下，然后再编辑这篇文章。不过，如果您找到了更好的解决方案，请随时发布任何其他建议！：）谢谢你找到解决方案了吗？@user3153278我也在这个非常混乱的问题中苦苦挣扎。你有任何更新的答案，除非你列出的选项少于6个，否则就可以了，否则就不在这个阶段。嗨，这很好，但我发现了一个问题。请检查一下，我得到的返回值是数组而不是字符串？在上，我想再次将css更改回OK按钮，但它不起作用。。。
<ion-select interface="action-sheet" [interfaceOptions]="randomOptions" ngModel>
    <ion-select-option value="...">Option #1</ion-select-option>
    <ion-select-option value="...">Option #2</ion-select-option>
</ion-select>

public randomOptions: any = { 
    cssClass: 'randomCSSClassName',
    ...
};

.randomCSSClassName {
    .action-sheet-group-cancel {
        display: none;
    }
}