关于angular：Ionic2离子选择，没有”确定”和”取消”

Ionic2 Ion-select without OK and Cancel

我已经构建了一个Ionic2应用程序，并且我目前正在尝试改善UX。为此，我收到了一些反馈，使我想到是否有一种方法可以使

1
2
3
4

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

点击该键，将立即为我提供输出，而无需等待用户按下离子操作表上当前显示的"确定"和"取消"按钮(http：// ionicframework .com / docs / v2 / api / components / select / Select /)默认使用。

任何建议将不胜感激！：)

编辑：

如@sebaferrreras所建议，

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

因此，如果您需要使用6个以上的选项，那么就目前而言，您将不得不找到一种解决方法，该功能未在Ionic2文档下列出。

相关讨论

我知道该线程已有7个月的历史了，OP可能已经超出了这个问题了，但是由于该功能尚未添加到ionic框架中，因此我要添加我为其他人想出的解决方法参考。

CSS PART

直观上，您需要做的第一件事是添加一些sass / css以隐藏不需要的按钮。我通过将ion-select元素的css类" remove-ok "传递给selectOptions来做到这一点。 (我只是删除"确定"按钮，但是如果有人也需要删除"取消"按钮，这是一个简单的CSS修改)。

在组件中：

1
2
3

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

和HTML：

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

然后在app.scss中添加：

1
2
3
4
5

.remove-ok {
.alert-button:nth-child(2) {
display: none;
}
}

脚本部分

现在，"确定"按钮已隐藏，您将需要以某种方式关闭警报视图。

在隐藏的"确定"按钮上调用click()事件很简单直观，但是您很快就会发现，尽管它在ionic serve上运行良好，但在实际的iOS设备上却无法运行。

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

因此在组件类的ngOnInit中，您将需要以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

同样，如果您也打算删除"取消"按钮，请注意此代码中的css引用。