typescript Ionic2 没有确定和取消的离子选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39014520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic2 Ion-select without OK and Cancel
提问by user3153278
I have built an Ionic2 app and I am currently trying to improve the UX. To do that, I received some feedback that made me think of whether there is a way of having a
我已经构建了一个 Ionic2 应用程序，我目前正在尝试改进 UX。为此，我收到了一些反馈，让我思考是否有办法让我
<ion-select>
<ion-option>
</ion-option>
</ion-select>
which upon tapped on, would give me the output straight away and not wait for the user to press on the currently appearing 'OK'and 'CANCEL' buttons that the ionic action sheet(http://ionicframework.com/docs/v2/api/components/select/Select/) uses by default.
点击后，会立即给我输出，而不是等待用户按下离子操作表（http://ionicframework.com/docs/v2/）当前出现的“确定”和“取消”按钮api/components/select/Select/) 默认使用。
Any suggestions will be greatly appreciated! :)
任何建议将不胜感激！:)
EDIT:
编辑：
As @sebaferrreras has suggested,
正如@sebaferrreras 所建议的那样，
If the number of options exceed 6, it will use the alert interface even if action-sheet is passed.
如果选项数量超过6个，即使action-sheet通过，它也会使用alert界面。
So if you need to use more than 6 options, you are going to have to find a workaround as for the moment, this functionality is NOTlistedunder the Ionic2 docs.
所以，如果你需要使用超过6个选项，你将不得不找到，因为就目前而言，这个功能是一种解决方案不列出下Ionic2文档。
回答by sebaferreras
Changing the API used in the select element (by using the ActionSheet API) could be an option.
更改选择元素中使用的API（通过使用ActionSheet API）可能是一个选项。
In order to do that, you only need to add interface="action-sheet"in the ion-selectelement.
为了做到这一点，你只需要添加interface="action-sheet"的ion-select元素。
<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>
I'm not sure if that's a valid option (in terms of UX) in your app.
我不确定这是否是您的应用程序中的有效选项（就用户体验而言）。
EDIT:
编辑：
Just like you can find in Ionic 2 docs
就像您可以在Ionic 2 文档中找到的一样
If the number of options exceed 6, it will use the alert interface even if action-sheet is passed.
如果选项数量超过6个，即使action-sheet通过，它也会使用alert界面。
回答by Vahid
I know this thread is 7 months old and the OP is probably long past this question but since the feature is yet to be added to ionic framework, I'm adding the workaround I came up with for other people's reference.
我知道这个线程已经有 7 个月了，而且 OP 可能早就过了这个问题，但是由于该功能尚未添加到 ionic 框架中，我正在添加我想出的解决方法供其他人参考。
CSS PART
CSS 部分
Intuitively the first thing you need to do is to add some sass/css to hide the unwanted buttons. I did that by passing a css class "remove-ok" to selectOptionsfor my ion-selectelement. (I'm only removing OK button but if someone needs to remove cancel button as well, that's an easy css modification).
直观地说，您需要做的第一件事是添加一些 sass/css 来隐藏不需要的按钮。我通过selectOptions为我的ion-select元素传递一个 css 类“remove-ok”来做到这一点。（我只是删除 OK 按钮，但如果有人还需要删除取消按钮，这是一个简单的 css 修改）。
In component:
在组件中：
this.selectOptions = {
cssClass: 'remove-ok'
};
and in HTML:
并在 HTML 中：
<ion-select [selectOptions]="selectOptions">
And in app.scssadd:
并app.scss补充说：
.remove-ok {
.alert-button:nth-child(2) {
display: none;
}
}
SCRIPT PART
脚本部分
Now that the OK button is hidden, you will need to somehow close the alert view.
现在 OK 按钮已隐藏，您需要以某种方式关闭警报视图。
To invoke click()event on the hidden OK button is straightforward and intuitive but you'll soon find out that although it works perfectly on ionic serve, it won't work on an actual iOS device.
click()在隐藏的 OK 按钮上调用事件非常简单直观，但您很快就会发现，尽管它在 上运行良好ionic serve，但在实际的 iOS 设备上却无法运行。
The solution is to find reference to the alert view, pass the checked option to the select handler, and finally dismiss the view.
解决方案是找到对警报视图的引用，将选中的选项传递给选择处理程序，最后关闭视图。
So in ngOnInitin your component class, you'll need this:
所以在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;
}
}
}
});
}
Again, if you intend to remove the Cancel button as well, mind the css references in this code.
同样，如果您还打算删除“取消”按钮，请注意此代码中的 css 引用。
回答by Khurshid Ansari
Pass empty value :
传递空值：
<ion-select okText="" cancelText="">
<ion-option>
</ion-option>
</ion-select>
It is working in my case.
它在我的情况下工作。
